World-Wide Web Support on MUSIC/SP

Image Maps

Making Clickable Images

Creating a Clickable Image

Creating the Image Map

Shape URL List-of-coordinates

Allowed Shapes

Getting Coordinates of Defined Areas

Detecting Errors

Image Maps

Making Clickable Images

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 image.

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:

_____________________________________________________________________________

<head> <title> campus </title> </head> <body> <a href=http://your.system//userid/http/campus.map> <img src="campus.gif"ismap> </a> <h5>Select a structure to obtain more information about it.</h5> <p> </body> _____________________________________________________________________________

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, for example). This file contains a series of shapes and their locations on the GIF image. These areas are then associated to URLs.

Lines beginning with # are comment lines.
Blank lines are ignored.
All other lines must be in the form:

Shape URL list-of-coordinates

Example:

rect 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":

_____________________________________________________________________________

# 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 _____________________________________________________________________________

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.

Allowed Shapes

Default: (abbreviated to DEF) The URL specified here will be passed to the client if the image is clicked on but not on an area we specified. No coordinates are given.
Rectangle: (abbreviated as RECT) A rectangle is defined by the upper-left and lower-right points.
Circle: (abbreviated to CIRC) A circle is defined as the center point and any point on the circle.
Polygon: (abbreviated to POLY) A polygon is defined as the points or vertices. Each vertex must be entered in the correct order. The maximum number of vertices is 100, that is a 100 sided polygon.

Getting Coordinates of Defined Areas

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 file.

_____________________________________________________________________________

 <head>
    <title> campus </title>
    </head>
    <body>
    <a href=http://your.system/ECHOER>
    <img src="campus.gif" ismap>
    </a>
    <p>
    </body>
_____________________________________________________________________________

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.

Notes:

The MUSIC HTTPD server requires that all files to be served must be in a subdirectory of HTTP or in a subdirectory that has the characters HTTP in its name.
The imagemap name must end in ".map". For example, the campus GIF would have an imagemap of userid:http\campu s.map.
If the HTML file or other document is on the same MUSIC system as the server, you need not specify the entire URL. The following illustrates this.
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
It will, at times, be inconvenient to have long lists of coordinates strung out on one line. You can continue lines by placing a minus sign (-) at the end of a line. You can simply resume with the next coordinate on the next line. The figure below illustrates this. This is strictly a MUSIC extension.
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 - 450,500

Detecting Errors

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:

for a rectangle with not exactly two pairs of coordinates found.
for a circle with not exactly two pairs of coordinates found.
for a polygon with less than three pairs of coordinates found.
for any shape that has unmatched pairs of coordinates.

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.

Return to "Web Support"

This page last updated May 2, 1997.