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: