Back to HTML index
The following image is an imagemap
Note that as your move your cursor accross the image, the hyperlink on the
status bar page changes as well. Each of the shapes is linked to a different URL.
To use an image as in imagemap, you must link it to an map definition within the page. In this example,
I named the map definition boxes:
<img src="boxes.jpg" usemap=#boxes BORDER="0">
<map name="boxes">
<area shape="poly" coords="14,8 168,8 168,39 14,39" HREF="http://surf.tstc.edu/~rcozby/">
<area shape="circle" coords="198,24 18" HREF="http://howdyyall.com">
<area shape="square" coords="233,7 270,44" HREF="imagemp2.htm">
<area shape="poly" coords="290,10 378,10 378,38 291,37" HREF="html_ndx.htm">
<area shape="poly" coords="0,0 400,0 400,50 0,50" HREF="oops.htm">
</map>
An image is linked to a map definition (usemap=#boxes). The "boxes" is a variable and is substituted for any map name you wish to use. It must
however match the map name in <map name="boxes">
Note the various shapes, "poly", "circle" and "square". A fourth shape, "default" refers to a point outside the defined areas. Often this "default" area
does not work properly, so a defination to enclose the entire graphic may be necessary, and seen in the final poly definition.
A poly can have any number of x,y points over three. Each x and y coordinate is separated by a comma, and each coordinate point is
separated from the next point by a space only.
The entire coordinate definition must be in quotes: coords="14,8 168,8 168,39 14,39"
A square must have 2 points, the x,y location of one corner, and the x,y coordinates of the opposite corner.
A circle requires the x,y coordinates of the center of the circle, and the single pixel length of the radius from the center.
The map definition then is concluded with the closing </map>