Implementing Imagemaps

Imagemaps allow the user to click on predefined sections of a graphic picture on your page and have the server respond as if they clicked on a text hyperlink. A complete tutorial is available including a sample imagemap and helpful tools. You are encouraged to review the entire tutorial.

Client-side imagemaps do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.

Download a mapping program to create a map file based on the desired image. The map file will contain the coordinates of each clickable region. We recommend MapEdit (PC) and WebMap (Mac), but other imagemapping tools may also be available.

Map out the hotspots using one of these programs and select the map file format "Client-side imagemap" as opposed to NCSA or CERN (for server-side maps) prior to saving the file.

Here is a sample client-side map file created using MapEdit:

<map name="sample">
<area shape="rect" coords="20,27,82,111" 
  href="hotspot1.html">
<area shape="circle" coords="129,113,29" 
  href="hotspot2.html">
<area shape="rect" coords="21,158,170,211" 
  href="mailto:support@mydomain.com">
<area shape="default" nohref>
</map>

Include the map file code within the desired HTML document and reference it like so:
```
<img src="image.gif" usemap="#sample">
```
Substitute the name of the desired image above and note the relationship between the HTML tag, <map name="sample"> and the usemap="#sample" attribute above. You can test your new client-side imagemap offline if the links refer to files on your local PC.

More information is available.