Imagemap tutorials - Part 1

As I stated in the previous page, imagemaps are nothing more than an image divided up into different regions. You can specify these regions by drawing an imaginary shape around the area you want as a 'hotspot', and using coordinates. Use can use a rectangle, oval, or a polygon to 'draw' your hotspots in the image you want to map. Lets take a look at the image to the right that was on the previous page, and see the source that makes it tick.

<img src="../../engines/enginepics.gif" width="200" height="400" usemap="#Engines" border="0">

First we specify the image, the image size, border..all the normal image attributes when calling an image to an HTML document. The difference is the part in bold. Its the usemap tag, which tells the document to use the #Engines map code as the source for the image. Lets take a look at this code:

<map name="Engines">
<area shape="rect" coords="117,9,191,39" href="http://www.google.com" target="_blank" alt="Google" title="Google">
<area shape="rect" coords="4,4,93,70" href="http://www.northernlight.com" alt="Northern Light" title="Northern Light" target="_blank">
<area shape="rect" coords="63,84,191,118" href="http://www.inktomi.com" alt="Inktomi" title="Inktomi" target="_blank">
<area shape="rect" coords="2,142,170,190" href="http://www.altavista.com" alt="Altavista" title="Altavista" target="_blank">
<area shape="rect" coords="91,194,190,224" href="http://www.dmoz.org" alt="The open directory project - DMOZ" title="The open directory project - DMOZ" target="_blank">
<area shape="rect" coords="10,238,133,289" href="http://www.lycos.com" alt="Lycos" title="Lycos" target="_blank">
<area shape="rect" coords="101,302,193,343" href="http://www.hotbot.com" alt="Hotbot" title="Hotbot" target="_blank">
<area shape="rect" coords="8,317,100,356" href="http://www.excite.com" alt="Excite" title="Excite" target="_blank">
<area shape="rect" coords="10,363,107,390" href="http://www.yahoo.com" alt="Yahoo!" title="Yahoo!" target="_blank">
</map>

Note I used recatangular shaped hotspots for all my clickable regions in the above example. Lets take one section and break it down and see what it all means.

Next:::