Facebook

How do I implement client-side image maps?

*This is legacy / old information that may no longer be applicable to your website.

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.

1.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.

2. 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 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@webii.net”>
<area shape=”default” nohref>
</map>

3.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.