The Much Improved imagemap Script

An imagemap is the mechanism for allowing clickable regions on an image to result in different pages.

There are four components:

An image map program (the server has one installed in cgi-bin.)
An image file to click on.
A map file to convert points on the image into URLs.
A HTML file to link the image and the map file

The image file is a gif file or some other type of graphic that can be displayed using an <IMG SRC="image.file"> tag.

The map file is described below, as is the HTML code needed to link the image and the map file.

The basic idea is:

The user views the HTML file containing the image.
The user clicks somewhere on the image, causing a connection to be made to the server.
This starts up the image map program on the server.
The program reads the map file specified as part of the URL and
Use the map file to convert the coordinate of the click into a URL
and finally tells Mosaic the URL to load in response to the click.

The Map Configuration File

This file maps regions in the image to URLs for the given image.

Lines beginning with # are comments. Every other non-blank line consists of the following:

method url coord1 coord2 ... coordn

coord are each coordinates, format x,y. The number of coordinates depends on method.

method is one of the following:

circle
For a circle. Coordinates: center edgepoint
circle http://www-pcd.stanford.edu/ 30,30 10,55
poly
For a polygon of at most 100 vertices. Each coordinate is a vertex.
poly html-simple.html 32,31 10,10 29,10
rect
For a rectangle. Coordinates: upper-left lower-right
rect /mogens/intro/fish.map 10,23 30,100

url is one of the following:

a virtual pathname to a file on the server (i.e. a relative URL without the http://hostname part)
a full URL

Note: each method is evaluated in the order it is placed in the configuration file. If you have overlapping areas, such as a circle inside of a rectangle, you should place whichever one you want evaluated first before the other in the map file. In this case, we would put the circle before the rectangle.

Using Your New Map

To reference your new map, you construct URLs pointing to it using the imagemap program in the /cgi-bin/ directory.

The URLs look like this:

  http://www-cs-staff.stanford.edu/cgi-bin/ismap/~yourname/map-file.name

and you wrap that URL using an image-map image, like so:

  <A HREF="http://www-cs-staff.stanford.edu/cgi-bin/ismap/~yourname/map-file.name">
  <IMG SRC="some.gif" ISMAP></A>

In other words, the anchor contains an image which has the magic word ISMAP embedded in the tag. This will cause the browser to place the coordinates of the click after the URL before calling the ismap program.

For example, http://www-pcd.stanford.edu/cgi-bin/ismap is the program name.

http://www-pcd.stanford.edu/~mogens/intro/fish.map is the map file.

http://www-pcd.stanford.edu/~mogens/intro/fish33.gif is the picture.

http://www-pcd.stanford.edu/~mogens/intro/ImageDemo.html is the HTML document that will contain the clickable image

<A HREF="http://www-pcd.stanford.edu/cgi-bin/ismap/~mogens/intro/fish.map"><IMG SRC="fish33.gif" ISMAP></A>

A Complete Example

The map configuration file used for this picture was rather lengthy. Rob used xv to get the coordinates.

The completed picture allows you to click on the objects in the picture and get descriptions of the object.

webmaster@cs.stanford.edu