Often information is best offered by presenting an image. Images can be very useful as a source or guide to other information. Different information can be associated with specific parts of the image. For example geographical maps can be used in place of a list or menu to point to and select a specific region or country. Another example, might be to present an image of a virtual shopping mall, where clicking on a store fetches particular information about that store.
Such images are called clickable images. Clickable images are created by defining areas on the image such as squares, circles and polygons. Each clickable area must be defined as one of these three shapes. These areas are arbitrarily selected by you. The shape need not actually appear in the image. You simply select points on the image that define the area you want. Often an approximation will suffice. Each area should be sufficiently apart or separated from one another. This will help users in making their selection and reduce accidental selections.
The coordinates of these areas are associated with
a URL in a file called an imagemap. Each clickable image has
its own imagemap file.
Creating a Clickable Image
Create the HTML document that is to contain the clickable
The image must be a GIF file. GIF files can be created or converted from other formats such as BMP, JPG, and TIF using a variety of PC tools.
For this example, let us suppose the image is called
campus.gif. A simple HTML document that would display this image,
as a clickable image, is the following:
<title> campus </title>
<h5>Select a structure to obtain more information about it.</h5>
Where your.system is the domain name of your MUSIC system, and userid is your MUSIC userid or account.
The figure below shows a client's display of http\campus.html:
The shapes of rectangles, circles and polygons are
superimposed on the GIF image. At times, to aid the user in the
selection, you may set outlines in the actual shapes that you
defined. An obvious example of this would be a geographical map.
However, the shapes you choose to define as selectable areas,
need not appear as such on the GIF image.
Creating the Image Map
You must define in a file called the imagemap (campus.map,
This file contains
a series of shapes and their locations on the GIF
image. These areas are then associated to URLs.
Shape URL list-of-coordinates
http://your.system//userid/http/gym.html 150 100 200 100
The shape can be one of rectangle, circle or polygon.
The list of coordinates are x,y pairs. The number of coordinates
depends on the shape. The following is an example of an imagemap
file called "campus.map":
_____________________________________________________________________________The imagemap specifications are taken in the order given. So that embedded shapes should be placed before the larger shape in which they occur. For this example the MUSIC file name is userid:http\campus.map.
# simple campus map # provide general info on campus default http://your.system//userid/http/general.html # Sir Arthur Currie Gym rect http://your.system//userid/http/gym.html 148,108 177,189 # Leacock Bldg rect http://your.system//userid/http/Leacock.html 6,61 55,104 # McIntyre Medical Bldg circle http://your.system//userid/http/medical.html 162,45 188,32 # Lower Campus plazapoly poly http://your.system//userid/http/plaza.html - 26,119 67,123 96,145 96,189 69,215 35,213 10,177 10,141 _____________________________________________________________________________
Some WWW browsers display the coordinates of the
cursor position as the mouse pointer is moved across a GIF defined
as a clickable image. See the example in section Creating a Clickable
Image. If your browser does not provide such a feature you can
use the ECHOER program to echo the coordinates as you outline
the areas of your GIF. The example below is identical to the
example provided in the section Creating a Clickable Image, except
that the ECHOER program is specified in place of the imagemap
_____________________________________________________________________________If the above were stored in the file userid:http\campus.html, it could be used to report to you the x,y values of any point on the GIF image. The URL for this MUSIC file is http://your.system//userid/htt p.campus.html While your WEB browser is displaying your GIF image, place the mouse pointer on the GIF image and click. The MUSIC HTTPD (WEB) server will echo back the x,y coordinates for the point you clicked on. By pressing on the back or previous button you will return to the GIF image. In this way you can obtain the x,y coordinates required for any area using one of the three basic shapes.
<head> <title> campus </title> </head> <body> <a href=http://your.system/ECHOER> <img src="campus.gif" ismap> </a> <p> </body> _____________________________________________________________________________
circle http://your.system//userid/http/medical.html 450 500 450 500
could be specified as follows:
circle //userid/http/medical.html 450 500 450 500
circle http://your.system//userid/http/medical.html 450,500 450,500
could be specified as follows
circle http://your.system//userid/http/medical.html 450,500 -
The HTTP server on MUSIC will assist you in debugging
the map statements by reporting errors via the browser. It will
report an invalid number of coordinates for the following reasons:
The server will also report invalid numeric entries
as well as invalid shape names. To assist you, all errors reported
bear a line number pointing to the error in the map file.