[Index] [Up] [Back] [Next]

6.2 Use of ISMAP by an HTTP Server Script

The ISMAP attribute for the IMG element allows 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 server a map between certain regions and the corresponding action. These regions can be specified as boxes, circles, or enscribed polygons.

(For additional information see the NCSA ISMAP documentation)

A nice graphical tool (for UNIX and Windows) for creating imagemap databases can be found at:
     http://sunsite.unc.edu/boutell/mapedit/mapedit.html .

6.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.utirc.ca/cgi-bin/imagemap/map_bozo">
<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.

6.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 is not referenced directly, as it must be also told which image database to use. This is done by accessing imagemap/name where name is the image name This sybolic name is used to indicate the appropriate database file. This file is obtained from the imagemap.conf configuration file.

6.2.3 Imagemap.conf

The database is divided into two parts. The first level is the names database file, usually called imagemap.conf. [The full path of this file is fixed in the source code imagemap.c and should be modified as appropriate for your server configuration.] The imagemap.conf file contains a list of mappings between image names and corresponding image maps. These mappings are entered: 

name:    path_of_map
where path_of_map is the full path to the map configuration file. For example the entry for my example would be: 
map_bozo:    /vast/u1/etc/httpd/conf/bozo.map
Since map_bozo was the image name specified in my hypertext URL. imagemap will access the database file and check to see if the mouse coordinates lie in a mapped region, and if they do, what URL to access.

6.2.4 Imagemap Map Configuration File

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

6.2.5 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://sunsite.unc.edu/boutell/mapedit/mapedit.html.

[Index] [Up] [Back] [Next]