Image Maps

Image maps are graphics which direct you to resources or locations by clicking on areas of the image. There are two types; server-side and client-side. With both kinds of image map, you display the image as normal using the <img> tag. You also provide a map of the graphic to tell the browser which coordinates of the image lead to which location.

The difference between the two types is that server-side image maps require your access provider to have the relevent processing script to interpret the map coordinates. This means the user must be on-line for the image map to function, it also means that they will work whichever browser is used. Conversely, client-side image maps are interpreted by the browser itself, implying that the image map will only function with a compatible browser. Netscape 2, Microsoft Internet Explorer and Mosaic can all interpret client-side image maps, I therefore would recommend client-side as the way to go. Below, you will find guides to employing server-side and client-side image maps.

Client-Side Image Maps

Having chosen a suitable image, you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <img> element with the usemap attribute. You then need to write a map file. A map file tells the browser which areas of the image lead to which destination. Map files can be written in any text editor and can be included at the end of the <body> section of an HTML document (my prefered method) or as a separate file, often in the same location as the graphic.

The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!

The code to display this particular image map is:

The usemap attribute contains the location of the map file and uses the same syntax as the href attribute of the <a> element. In this case the corresponding map file, engines2, is contained within the HTML document and a # is used to indicate a local file. If the map was contained separately in a graphics directory, the usemap attribute could read usemap="graphics/engines2.map".

The map file, engines2, is:

The elements of a map file are explained below:

There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map as decribed above, but use the ismap (see server-side) attribute instead of usemap. Load it into your browser; move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro. Client-side image maps can be automatically generated using the wonderfully simple MapEdit.

Server-Side Image Maps

Server-Side Image Maps are quite easy to set up, but require your access provider to have the relevent processing script.

Having chosen a suitable image you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <img> element with the ismap attribute. You then need to place the image within a link to the relevent .map file. A map file tells the browser which areas of the image lead to which destination. The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!

The code to display the image map is:

The corresponding map file, engines2.map, is:

Map files can be written in any any text editor and are often included in the same location as the graphic. By way of explanation, the file after default is the file the user is directed to if he/she clicks outside one of the specified areas. The text after rect (rectangle) contains the URL of the destination file followed by coordinates in pixels of the top-left and bottom-right corners of the relevent rectangular area on the image map.

There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map, as decribed above, and load it into your browser. Move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro.

For a little more help on image maps, try the CIX tutorial.