Using Image Maps

Here is an image that contains 6 blocks of text that are to be made into active links:

The image declaration needs to contain the name of the map to use. The syntax is: usemap="#mapname"

<img src="directory.jpg" width="300" height="100" border="0" usemap="#directory">

The map name must match the name given in the image declaration. Within the map, the coords specify the upper-left x,y, and the lower-right x,y, where 1,1 is the upper-left corner and n,n is the lower-right corner.

<map name="directory">
<area alt="" coords="1,1,140,31" href="#amusements">
<area alt="" coords="1,32,140,64" href="#flash">
<area alt="" coords="1,65,140,99" href="#science">
<area alt="" coords="142,0,299,31" href="#reference">
<area alt="" coords="142,32,299,64" href="#webdev">
<area alt="" coords="142,65,299,99" href="#travel">
</map>