ToC ~ Up ~ Prev ~ Next ~ Index Introduction to HTML
Last Update: 5 January 1998

7.6 MAP Element

Netscape, Microsoft (Version 2.0 and later) and Spyglass browsers all support the client-side image map element 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.

NOTE -- According to the official specifications, you should be able to specify SHAPE="circle" giving two point cordinates: the ecenter and an edge of a circle, using the form COORDS="x1, y1, x2, y2". This form, however, does not work.

7.6.1 Referencing the MAP

You reference the map from within an IMG element using the USEMAP attribute. For example:

   <IMG SRC="blobby.gif" USEMAP="#string">

references the map named "string" listed above. YOu could also put an ISMAP inside this IMG element, and surround the IMG by an anchor pointing to a server=side imagemap program -- if the browesr understands USEMAP it will ignore the ISMAP and use the client-side map found in the MAP element. If it does not understand USEMAP it will default to the regular behaviour.


ToC ~ Up ~ Prev ~ Next ~ Index Introduction to HTML
© 1994-1998 by Ian Graham
Last Update: 5 January 1998