The Web Design Group

MAP - Image Map

Syntax <MAP>...</MAP>
Attribute Specifications
Contents One or more AREA or block-level elements
Contained in Inline elements, block-level elements

The MAP element defines a client-side image map for use with an IMG, OBJECT, or INPUT element. MAP's required NAME attribute is used as an anchor for the USEMAP attribute of the IMG, OBJECT, or INPUT element.

HTML allows images in different documents to use the same MAP definition from just one file, but many browsers do not support this and require the MAP and image elements to be in the same document.

MAP was originally defined to take one or more AREA elements that specify the coordinates of a clickable region on the image. An example follows:

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

HTML 4 extends the MAP element to take one or more block-level elements as an alternative to using AREA elements. Combined with the OBJECT element, this allows rich alternative content for those not loading images. However, due to poor and buggy browser support for OBJECT, client-side image maps through the IMG element are more reliable.

When MAP is given within an OBJECT, its contents are not rendered on image-loading browsers. MAP may also be used outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

More Information