ImageMap Files

Image map files are easy to construct. All you need are the (x, y) coordinates of the areas within your image that you would like to correspond to a given URL when clicked upon. There are many programs available which can build a map file for you, but if for some reason you don't have access to these you can make a mapfile yourself. You can also choose to make a client-side imagemap, which is a simple set of html tags containing all the map and URL information placed in the page containing the imagemap.

To begin with you need:

  1. Image in gif or jpg format.
  2. URLs that you would like areas of your image to correspond to.
  3. The coordinates of geometric shapes, like squares, circles, and polygons within your image that you want the URLs to map to.
Numbers 1 and 2 you make up yourself. Number 3 is not so straightforward and usually requires some software to measure your image and return the coordinates to you.

A map file is a text file containing descriptions of a geometric shape, URLs which should be returned when that shape is clicked on, and the minimum (x, y) points required to specify the geometric shape.

For example, the .map file for the example imagemap below is:

default http://www.he.net/~seidel/Map/globdflt.html
circle http://www.he.net/~seidel/Map/glob1.html 128,35 95,16
rect http://www.he.net/~seidel/Map/glob2.html 8,93 121,161
poly http://www.he.net/~seidel/Map/glob3.html 148,86 177,63 217,67 252,111 229,127 194,125 148,86

I retrieved the (x,y) points to specify the geometric shapes using the Poor Person's Image Mapper, and then entered those into a text file, seperating the methods, URLs, and (x,y) points by spaces.

The protocol for shapes is:

circle - center point, edge point.
rectangle - upper left corner, lower right corner.
polygon - all the vertices.

Once you create the .map file and place it on your server, you can then use it to serve an imagemap. If you're running NCSA HTTPd1.5 you have the luxury of internal imagemap support and can call your image map very easily. In that case, for example, the code which would call the imagemap above would be: 

<a href="http://www.he.net/~seidel/Map/glob.map">
<img border=0 src="http://www.he.net/~seidel/Map/glob.gif" ISMAP></a>
Alternatively, if you have an older server, or are using an Apache server, you might have to make reference to the imagemap script in the cgi-bin directory of the server. For instance, the code which calls the imagemap above in this page is:
<a href="http://www.he.net/cgi-bin/imagemap/~seidel/ClrHlpr/glob.map">
<img border=0 src="http://www.he.net/~seidel/Map/glob.gif" ISMAP></a>
The basic idea is to pass the location of the .map file to the server imagemap program, and then tell it where the image is, using the ISMAP tag to tell it that the image is to be used as a map.

An excellent resource for imagemap information is the NCSA Imagemap Tutorial

Map files can have different syntax depending on what server you serve your imagemaps through (i.e. NCSA or CERN, etc.). Also client side imagemaps are administered differently than server side imagemaps. Regardless of syntax, they all use mouse click locations. In case you don't have software to show you the mouse click locations, this utility can return the locations to you.

Some Browsers can serve as image mappers

Alternatively, if you have Netscape2.0 or higher you can get map coordinates simply by making a page with your image in it as if it were already an image map, then when you call the page up on your browser you'll see that if you move your mouse over the image, the coordinates should appear in the lower left hand corner of your browser.

Chris Seidel