How to do Client-Side Imagemaps

The coordinates and "hot" areas of a client-side imagemap are defined within the html document itself. If we use the same cube image from the imagemap tutorial, here is what the html code would look like:

<map name="cube">
<area shape="rect" coords="1,1,37,37" href="square1.html">
<area shape="rect" coords="37,1,74,37" href="square2.html">
<area shape="rect" coords="1,37,37,74" href="square3.html">
<area shape="rect" coords="37,37,74,74" href="square4.html">
</map>

Note that no default is required, because the user simply will not be able to click outside the defined "hot" areas.

The actual image link should look like:

<img src="cube.gif" alt="" usemap="#cube">

Note that there is no anchor around this image tag, but it should have usemap pointing back at the exact name of the map you've defined in your document.

Here is the imagemap in action: (note you'll only be able to use this if you're using Netscape 2.0 or higher, or a recent version of Internet Explorer.)

Imagemap Tutorial | Toolbox