To the left is a useless little image map I made for this page. If you run
your mouse over it, you will notice it has areas that are links. For this
example, they all link to this page, but normally, your map could link
to all the other pages in your site.The way an image map works is that it specifies the coordinates of the points on the image that are links. For example, if you make a rectangle around the text "Link 1" it would have four points: the top left corner, the top right, the bottom left, and the bottom right.
Here is an example of the code you need for an image map: <img src="../pix/mapex.gif" usemap="#mapex">
<map name="mapex">
<area shape="poly" coords="53,30 89,68 138,47 95,16 53,31" href="maps.html" alt="a">
<area shape="poly" coords="50,32 86,71 90,121 42,90 50,33" href="maps.html" alt="b">
<area shape="poly" coords="89,68 96,120 133,98 137,49 90,70 92,71" href="maps.html" alt="c">
</map> That's the code used for the map above. You can make image maps somewhat by hand by finding these coordinates on your own, or you can use an image mapping utility, like this great free software I found called "Happy Lad Image Mapper." You want it.
<happy lad>
Happy Lad was created by Divine Invention and is freeware. You can create rectangular, circular, and polygonal shapes using it, then either copy the map coordinates it produces to your clipboard, or export them to a file. No, they did not pay me to say this; I just love it! The only problem I have with it is that if you want to finish one image map and start another without closing and re-opening the program, it has a weird error and closes. But heck, it's free. Get it here.
Below is a picture of the image map above being created in Happy Lad.
