MAP - Image Map

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. While a MAP element can define image maps embedded in other files, browsers typically only support client-side image maps with the MAP in the same file as the image.

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/index.php3?" 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

This document was modified from the Web Design Group's original work. The Web Design Group takes no responsibility for any errors introduced.