Image Map Introduction

An imagemap is a graphic which contains "clickable hotspots" that are linked to different URLs. A user viewing an image may click on any of these hotspots and be transfered to the appropriate URL.

There are two methods of presenting imagemaps - server-side maps and client-side maps. The names specify where the URL mapping information is held. If a web page uses a server-side image map to present information, the mapping info is kept in a file on the web server. This means the user must wait for the server to interpret which part of the graphic was clicked and send the correct URL back to the browser. This can be slow, especially if your site is busy. It also adds additional stress to the servers.

Client-side image maps are a standard forwarded by Netscape. It is relatively new and most browsers still do not support it. However, it is much faster than a server-side image map because all the information on hotspots and related URLs is held within the HTML page. This means the browser must not wait for the server to tell it where to go. It also means the server has less work to do.

The remainder of this document will only discuss server-side image maps.


Creating Server-Side Image Maps

To create an image map, you must first have a graphic you would like to use. Once a graphic has been completed, a map file must be created. There are several programs which will help you create image map files, including CuteMap and Map This (both available on our tools page). A map file ends in the extension .map. Once it has been created, copy it to its proper location on the server. It is a plain text file, so when using FTP, remember to use ASCII transfer mode.

Several tags must be added to your HTML document to activate the image map. First add an anchor URL to the location of the image map. This tag is then followed by an IMAGE tag with the ISMAP parameter. An example looks like this:

<A HREF="http://www.xhost.co.uk/sample.map">
<IMG SRC="http://www.xhost.co.uk/sample.map" ISMAP></A>

When a user clicks on the image, the browser will request the image map file from the server. The server receives the coordinates of the mouse click from the browser, parses the map file, and determines the appropriate URL to return to the browser.