IceHouseDesigns Tutorials Imagemap tutorials

Imagemap tutorials

Imagemaps have been around for quite some time on the web design front. For those of you that don’t know what an imagemap is, it’s basically an image which has different “hot spots” set, and clicking on different parts of the image will give you different results ( take you to different web pages, etc ).

Here is a sample of an image that was made on my site and turned into an imagemap.

Note how the image above is one image, however sections are defined so that they have different results. ( They go to different URL’s if you click on them, and have different ALT text ).

So now that you know what an imagemap is, lets find out how they work shall we?

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.

Ok lets take the 3 areas of the <map> tag and break it down.

<map name=”Engines”>

This specifies the ‘name’ associated with the image, that we saw earlier.


<area shape=”rect” coords=”117,9,191,39″ href=”http://www.google.com” target=”_blank” alt=”Google” title=”Google”>

Area shape=”rect”

Defines the shape of the ‘hotspot’ as a rectangle.

coords=”117,9,191,39″

Each image on a web page has coordinates, in terms of xpixels wide and y pixels high. The upper left corner is 0,0 and the bottom right corner of the image is x,y. Lets take a look at it this way:

UpperX = top left of hotspot to far left of the whole image

UpperY = top left of hotspot to the top of whole image

LowerX = bottom right of hotspot to far left of whole image

LowerY = bottom right of hotspot to top of whole image.

Each area assigned to a URL is specified between the map tags in the form <AREA SHAPE=”RECT” COORDS=”UpperX,UpperY,LowerX,LowerY” HREF=”some_URL”>. CIRCLE (COORDS=”Center-x,Center-y, Radius_length”) POLYGON (COORDS=”X1,Y1,….,Xn,Yn”)

You can use alt text in your URL’s if you wish to do so.

</map>

Simple..ends the source for the imagemap. Now that was the easy part huh?

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post