Imagemap tutorials - Part 2

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 x pixels 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")

This image might explain it better...as to how the coordinates are figured out.

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?

Questions? Need help? Comments?

Return to tutorials