Imagemaps
Imagemaps, also called "clickable maps" are a way to use images as a navigational interface. You can use either a GIF or a JPEG file, with a slightly modified IMG SRC tag, which points to a set of coordinates and URLs called the "map file."

In order to create an imagemap, you will probably want to use a special program for determining the coordinates for the areas that you want to be clickable. For the Mac a useful program for doing this is Imagemapper. There are a couple of different methods of doing imagemaps. The old school method uses a cgi-bin program on the server side to process the click and coordiantes. The more recent method all calculations happen within the browser, and is thus called a client-side imagemap.


Traditional imagemaps.
The trickiest part of this type of imagemap is constructing the links properly. Here is an example:
(Note that only the horns and hand of the image are clickable.)

Here's the syntax for the image tag and the link:

<A HREF="http://www.itp.tsoa.nyu.edu/~boom/maps/petrodude.map"><IMG ALIGN=bottom SRC="http://www.itp.tsoa.nyu.edu/~boom/class/gif/petrodude.gif" ISMAP></A> So the thing that's happening there is that by using the ISMAP parameter in the tag, you are telling the server to anticipate a set of coordinates indicating where the click happened, and then to use a cgi-bin program to compare those coordinates to the map file which the graphic is linked to.

And here is the map file:

default /~boom/class/imagemap.html rect /~boom/class/hand.html 75,52 100,76 poly /~boom/class/horns.html 19,41 12,23 29,0 56,1 78,31 53,43 Note that the default line tells the server what to do if the user clicks outside the defined areas. This is required.
Client-side imagemaps.
The basic functionality is the same. The pro of doing a client-side map is that you cut down on the time required to send the coordinates back to the server, and when users rollover the hot areas of a map the link shows in the status bar at the bottom of the browser. The con is that this is a Netscape proposed extension to the HTML standard, so older browsers (pre-Netscape 2) won't understand what you are doing. Here's the same example done client-side:

And here is some sample code which would produce that:

<html> <head> <title>An imagemap demo</title> </head> <body bgcolor="#ffffff"> <IMG ALIGN=bottom SRC="http://www.itp.tsoa.nyu.edu/~boom/class/gif/petrodude.gif" USEMAP="#petrodude"> Click on the dude's head or hand. <!-- This is the client-side map file. --> <map name=petrodude> <area shape="rect" coords="75,52 100,76" href="http://fargo.itp.tsoa.nyu.edu/~boom/class/hand.html"> <area shape="poly" coords="19,41 12,23 29,0 56,1 78,31 53,43" href="http://fargo.itp.tsoa.nyu.edu/~boom/class/horns.html"> </map> </body> </html>

Both types of imagemaps at the same time.
Since client-side imagemaps are not supported by all browsers, you may want to include code in your pages which is compatible with both methods. Thankfully, what will happen is that older browsers will ignore the client-side code, and newer browsers will ignore the older code. An example of this type of code follows:

<html> <head> <title>Another imagemap demo</title> </head> <body bgcolor="#ffffff"> <a href="http://www.itp.tsoa.nyu.edu/~boom/maps/petrodude.map"> <IMG ALIGN=bottom SRC="http://www.itp.tsoa.nyu.edu/~boom/class/gif/petrodude.gif" USEMAP="#petrodude" ISMAP> </a> Click on the dude's head or hand. <!-- This is the client-side map file. --> <map name=petrodude> <area shape="rect" coords="75,52 100,76" href="hand.html"> <area shape="poly" coords="19,41 12,23 29,0 56,1 78,31 53,43" href="horns.html"> </map> </body> </html> Note that for this to work there must be a map file, as described in the first section of this page, at /~boom/maps/petrodude.map.

Software.
Imagemapper 2.5 is a very handy program for the Mac. If this URL doesn't work, do a search on shareware.com.
MapEdit is a good program to use on the PC.

Building Web Sites - ITP Winter 1999 - Mike Cosaboom, Instructor
mc39@acf2.nyu.edu