MAP - Image Map

Summary

Syntax	<MAP>...</MAP>
Attribute Specifications	NAME=CDATA (name of map) common attributes
Contents	One or more block-level elements or one or more AREA elements
Contained in	Inline elements, block-level elements

Details

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

HTML allows IMG elements 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 IMG elements to be in the same document.

MAP was originally defined to take one or more AREA elements that specified 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.0 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

• MAP in W3C HTML 4.0 Recommendation
• MAP in W3C HTML 3.2 Recommendation
• MAP in WDG HTML 3.2 Reference
• MAP in Learning HTML 3.2 by Examples

Copyright © John Pozadzides and Liam Quinn. All rights reserved.