MAP Element

Netscape, Microsoft, and Spyglass browsers all support the client-side image map tag <MAP>. <MAP> specifies the regions of a mapped image and the associated URLs within a structure of the form:

<MAP NAME="string">
<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="url_for_region">
..... more shapes ...
</MAP>

where (x1,y1) are the upper-left hand coordinates and (x2,y2) the lower right-hand coordinates for the rectangle. Other possible shapes are 
<AREA SHAPE="circle" COORDS="x1, y1, r" 
	HREF="url_for_region">
<AREA SHAPE="polygon" COORDS="x1, y1, x2, y2 ... xn, yn" 
	HREF="url_for_region">
With the circle, (x1,y1) is the center and r is the radius.
All coordinates are in pixels.

You reference the map from within an <IMG> tag using the USEMAP attribute. For example: 

<IMG SRC="a_picture.gif" USEMAP="#string">
references the map named "string" listed above. If a browser does not understand USEMAP it will default to the regular behavior.


Example:

Imagine the following table to be a picture with each side on each cell being 200 pixels in length. The top left corner's coordinates is (0,0) and the bottom right corner of the image is (399,399):

OneTwo
ThreeFour

and its corresponding HTML tag is:
<IMG SRC="four_corners.gif" USEMAP="#example">

The MAP would be defined as:
<MAP NAME="example">
<AREA SHAPE="rect" COORDS="0, 0, 199, 199" 
	HREF="first.html">
<AREA SHAPE="rect" COORDS="200, 0, 399, 199" 
	HREF="second.html">
<AREA SHAPE="rect" COORDS="0, 200, 199, 399" 
	HREF="third.html">
<AREA SHAPE="rect" COORDS="200, 200, 399, 399" 
	HREF="fourth.html">
</MAP>
The browser will reference: