`map` Element

Accessibility Information

Skip to Page Content
Up, Next & Previous Links
Your Location
Main Menu
Page Footer

In this page:

Module
Description
#REQUIRED Attributes
Specific Attributes
Common Attributes
Content Model

Module

The map element is declared by the XHTML 1.1 Client-side Image Map Module

Elements in the Client-side Image Map Module are:
map | area

Description

The map element allows a single image to be divided into several areas, each of which is a link to a specific URI.

Note: XHTML 1.1 allows the a map element to be referenced by the usemap attribute (of type IDREF, from the Client-side Image Map Module) of the elements img, input type="image" or object. This referencing works if the document is served as "application/xhtml+xml", but does not work if served as "text/html". This is because of the HTML specification that usemap be an image map URI rather than an IDREF. This means that, for "text/html" documents, one has to refer to a map by its URI (i.e. with its name attribute, removed in XHTML 1.1, as the fragment identifier) rather than by its id. Since these two approaches are mutually exclusive, client-side image map code is not portable between HTML compatible "text/html" and XHTML 1.1 "application/xhtml+xml" documents.

IMPORTANT UPDATE: It seems as though browser support for valid XHTML 1.1 client-side image maps (CSIMs) is actually quite poor. In 2007, my testing led me to believe that major XHTML-compatible browsers would automatically interpret usemap attributes correctly (i.e. as having the IDREF attribute type) provided that the XHTML 1.1 document was served as "application/xhtml+xml". However, it seems as though some newer browser releases use the old HTML URI fragment identifier method irrespective of the MIME type sent by the server. For example, I found that Firefox 2 recognised usemap as having type IDREF and hence behaved as expected. On the other hand, Firefox 3 (and Opera 9.5, for that matter) renders usable CSIMs only if usemap is assigned a URI fragment identifier, even if the "application/xhtml+xml" Content-Type is specified. This makes it impossible to write valid XHTML 1.1 CSIM code which will function in these browsers. I would therefore recommend that CSIM code be avoided in XHTML 1.1 documents.

The following code creates a client-side image map, with the various areas of the image specified in the map being links to their respective URIs.

<img src="map.jpg" height="40" width="500" usemap="mapid" alt="Main Menu" />
<map id="mapid">
  <area shape="rect" coords="0,0,89,40"    href="/"            alt="Home"     title="Home"     />
  <area shape="rect" coords="90,0,177,40"  href="option1.html" alt="Option 1" title="Option 1" />
  <area shape="rect" coords="178,0,279,40" href="option2.html" alt="Option 2" title="Option 2" />
  <area shape="rect" coords="280,0,393,40" href="option3.html" alt="Option 3" title="Option 3" />
  <area shape="rect" coords="394,0,500,40" href="option4.html" alt="Option 4" title="Option 4" />
</map>

If the browser does not support images or images have been turned off, the alt text for each area should be displayed as a link to the relevant URI, but this cannot be guaranteed. All area elements must be direct children of a map element in XHTML 1.1.

Alternatively, you can use a elements instead of area elements to define the links within an image map. If you do use a elements within a map then the contents of the map element are rendered at that position within the document, as well as allowing corresponding image maps to be created at one or more other positions using img (or object) in conjunction with usemap. This is handy if you want to have a text-based menu somewhere on the page but use the same link data for a graphical menu elsewhere.

However, if the map is contained within an object element, as in the example below, its contents will not be rendered unless the browser does not recognise or support that type of object.

<object data="map.jpg" type="image/jpeg" usemap="mapid2">
  <map id="mapid2">
    <div>
      <a shape="rect" coords="0,0,89,40"    href="/"            title="Home">Home</a> |
      <a shape="rect" coords="90,0,177,40"  href="option1.html" title="Option 1">Option 1</a> |
      <a shape="rect" coords="178,0,279,40" href="option2.html" title="Option 2">Option 2</a> |
      <a shape="rect" coords="280,0,393,40" href="option3.html" title="Option 3">Option 3</a> |
      <a shape="rect" coords="394,0,500,40" href="option4.html" title="Option 4">Option 4</a>
    </div>
  </map>
</object>

Note the div element immediately within the map in this case. This is because a map element may contain either only block level elements or only area elements (see the Content Model). If you are placing a map element (or any containing object) in a location where block-level elements are not allowed, e.g. within a p element, you should use the area method.

From the Core Attribute Collection

class [ type NMTOKENS ]: One or more space separated classes
id [ type ID - #REQUIRED ]: A unique identifier for the element
style [ type CDATA ], from the Style Attribute Module (deprecated): Element-specific styles
title [ type Text ]: Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)
xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]: XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module: Left-to-right or right-to-left directionality
xml:lang [ type LanguageCode ]: A language code for the element