9.2 Use of ISMAP by an HTTP Server Script

The ISMAP attribute for the IMG element lets you to turn an image into a graphically active element. This means that you can select regions of the image by clicking the mouse on them, and that clicking on different regions will cause the server to take different actions.

Conceptually this is done by creating, on the HTTP server, a map between certain regions and the corresponding action. These regions can be specified as boxes, circles, or enscribed polygons.

Then, when you click on the image, the coordinates of your click are sent down to a program on the server that looks in this database for the action associated with those coordinates.

The program then returns a message back to the browser that tells the browser which document it should access. This is known as a server redirect message, and is one of the standard messages of the HTTP protocol.

9.2.1 HTML Code for Active Image

The following is an example, where the gif file bozo.gif is declared active:

   <A HREF="http://www.hprc.ca/cgi-bin/imagemap/path/to/database">
   <IMG SRC=bozo.gif ISMAP>
   </A>

The ISMAP attribute declares the image to be active - when you click the mouse over the image the browser sends to the server the pixel coordinates of the mouse, with respect to the image origin.

9.2.2 Imagemap

These data must be processed by a program on the server. This is accomplished by creating a hypertext link from the image to the cgi-bin program imagemap. This program is designed to process the ISMAP data returned by the browser, and activates the correct URL by comparing the mouse coordinates with information in an imagemap database.

The imagemap script must also be told which image database to use -- each image will have its own map database. This is done by accessing imagemap/path/to/database where path/to/database is the path to and name of the imagemap database appropriate to the image. Imagemap takes this extra information (known as "extra path" information) and uses it to access the indicated database file.

9.2.3 Imagemap Map Configuration File

The database files map regions of the image to particular URLs. Again, lines beginning with # are comments, Every other non-blank line consists of the following:

method    URL    x1,y1  x2,y2  ... xn,yn

The meaning and required number of coordinates (x1,y1) depends on the method. The different methods are:

circle

Proscribed region is a circle. Two pairs of coordinates are required: centre edgepoint

rect

Proscribed region is a rectangle. Two pairs of coordinates are required: upper_left lower_right

poly

For a polygon of at *most* 100 vertices. each coordinate pair is a vertex.

The URL is either a relative or absolute URL. Recall that a relative URL is a URL to the server being currently accessed, but without the http://hostname part, and that in the absence of a leading slash the document is searched for relative to the directory containing the current document.

9.2.4 Coordinates in Map Files

So how do you find the coordinates for these domains? They are referenced by the pixel coordinates. The origin for the coordinaate is the UPPER LEFT-HAND image corner. How do you get these coordinates? The image program xv does this quite easily, as do a number of commercial packages.

Recall that the IMG element can only display GIF and X-bitmap images inlined. Therefore you can only use these format images.

The NCSA ISMAP documentation contains further descriptions of the ISMAP facility, along with examples of an active image and of a map configuration file.

Thomas Boutell has written a nice Windows and UNIX program for graphically editing an imagemap database file directly from the image. Information about mapedit can be found at:
    http://www.boutell.com/mapedit/. You can find other, similar program by looking at typical Web catalog sites, such as Yahoo!.