Imagemap Tutorial

Here's what you need to know to install an client-side imagemap on your page. First, you'll need a graphic of some sort. Let's start with a simple cube:

In order to make the image actually be a "map", you must add a usemap parameter to the image tag:

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

Then you also need to create a section of code in your HTML page that corresponds with the map name you just told the browser to use:

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

"rect" just means we're defining a rectangle. The coords numbers are the x,y coordinates of the upper left and lower right corners of each rectangle. Then the href indicates the particular file to call up when someone clicks inside the rectangle you're defining.

There are a number of programs you can use to find out what the x,y coordinates are. Lots of freeware mapping programs exist that will create the map code for you. Or you can eyeball it; some browsers will show the x,y coordinates in the status bar of the browser as you mouse over the image.

Here's the actual imagemap: