12. XHTML Client-Side Image Map Module


This section is normative.

The Client-side Image Map Module provides elements for client side image maps. It requires that the Image Module (or another module that supports the img element) be included. The Client-side Image Map Module supports the following elements:

Elements Attributes Minimal Content Model
a& coords (CDATA), shape ("rect" | "circle" | "poly" | "default") n/a
input& usemap (IDREF) Note: Only when the Forms module is included
map I18N, Events, class (NMTOKEN), id* (ID), title (CDATA) ((Heading | Block) | area)+
object& usemap (IDREF) Note: Only when the object module is included

When this module is used, the map element is added to the Inline content set of the Text Module.

Implementation: DTD

12.1. The area element

The area element defines a geometric region associated with an image map, and optionally associates that region with events or external references.


The Common collection
A collection of other attribute collections, including: Core, Events, I18N, and Hypertext
shape = "default|rect|circle|poly"
This attribute specifies the shape of a region. Possible values:
  • default: Specifies the entire region.
  • rect: Define a rectangular region.
  • circle: Define a circular region.
  • poly: Define a polygonal region.
coords = Coordinates
This attribute specifies the position and shape on the screen. The number and order of values depends on the shape being defined. Possible combinations:
  • rect: left-x, top-y, right-x, bottom-y.
  • circle: center-x, center-y, radius. Note. When the radius value is a percentage value, user agents should calculate the final radius value based on the associated object's width and height. The radius should be the smaller value of the two.
  • poly: x1, y1, x2, y2, ..., xN, yN. The first x and y coordinate pair and the last should be the same to close the polygon. When these coordinate values are not the same, user agents should infer an additional coordinate pair to close the polygon.

Coordinates are relative to the top, left corner of the object. All values are of type Length. All values are separated by commas.

nohref = "nohref"
When set, this boolean attribute specifies that a region has no associated link.
usemap = URI
This attribute associates an image map with an element. The image map is defined by a map element. The value of usemap must match the value of the id attribute of the associated map element.
navindex = Number
This attribute specifies the position of the current element in the navingation order for the current document. This value must be a number between 0 and 32767. User agents must ignore leading zeros.

The navigation order defines the order in which elements will receive focus when navigated by the user via the keyboard. The navigation order may include elements nested within other elements.

Elements that may receive focus should be navigated by user agents according to the following rules:

  1. Those elements that support the navindex attribute and assign a positive value to it are navigated first. Navigation proceeds from the element with the lowest navindex value to the element with the highest value. Values need not be sequential nor must they begin with any particular value. Elements that have identical navindex values should be navigated in the order they appear in the character stream.
  2. Those elements that do not support the navindex attribute or support it and assign it a value of "0" are navigated next. These elements are navigated in the order they appear in the character stream.
  3. Elements that are disabled do not participate in the navigation order.

Tabbing keys. The actual key sequence that causes navigation or element activation depends on the configuration of the user agent (e.g., the "tab" key is used for navigation and the "enter" key is used to activate a selected element).

User agents may also define key sequences to navigate the navigation order in reverse. When the end (or beginning) of the navigation order is reached, user agents may circle back to the beginning (or end).

accesskey = Character
This attribute assigns an access key to an element. An access key is a single character from the document character set. Note. Authors should consider the input method of the expected reader when specifying an accesskey.

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the a element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

In this example, we assign an access key to a link defined by the a element. Typing this access key takes the user to another document, in this case, a table of contents.

<p><a accesskey="C" 
    Table of Contents</a>

The invocation of access keys depends on the underlying system. For instance, on machines running MS Windows, one generally has to press the "alt" key in addition to the access key. On Apple systems, one generally has to press the "cmd" key in addition to the access key.

The rendering of access keys depends on the user agent. We recommend that authors include the access key in label text or wherever the access key is to apply. User agents should render the value of an access key in such a way as to emphasize its role and to distinguish it from other characters (e.g., by underlining it).

alt = CDATA
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the xml:lang attribute.

Several non-textual elements let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

  • Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
  • Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
href = URI
This attribute specifies a hypertext link that is activated when the element is selected.

12.2. The map element

The map element specifies a client-side image map (or other navigation mechanism) that may be associated with another object. An image map is associated with an element via the element's usemap attribute. The map element may be used without an associated image for general navigation mechanisms.


The Common collection
A collection of other attribute collections, including: Core, Events, I18N, and Hypertext

The presence of the usemap attribute for an object implies that the object being included is an image. Furthermore , when the object element has an associated client-side image map, user agents may implement user interaction with the object solely in terms of the client-side image map. This allows user agents (such as an audio browser or robot) to interact with the object without having to process it; the user agent may even elect not to retrieve (or process) the object. When an object has an associated image map, authors should not expect that the object will be retrieved or processed by every user agent.

The map element content model allows authors to combine the following:

  1. One or more area elements. These elements have no content but specify the geometric regions of the image map and the link associated with each region. Note that user agents do not generally render area elements. Therefore, authors must provide alternate text for each area with the alt attribute.
  2. Block-level content. This content should include a elements that specify the geometric regions of the image map and the link associated with each region. Note that the user agent should render block-level content of a map element. Authors should use this method to create more accessible documents.

When a map element contains mixed content (both area elements and block-level content), user agents must ignore the area elements.

Authors should specify an image maps's geometry completely with area elements, or completely with a elements, or completely with both if content is mixed. Authors may wish to mix content so that older user agents will handle map geometries specified by area elements and new user agents will take advantage of richer block content.

If two or more defined regions overlap, the region-defining element that appears earliest in the document takes precedence (i.e., responds to user input).

User agents and authors should offer textual alternates to graphical image maps for cases when graphics are not available or the user cannot access them. For example, user agents may use alt text to create textual links in place of a graphical image map. Such links may be activated in a variety of ways (keyboard, voice activation, etc.).

12.2.1. Client-side image map examples

In the following example, we create a client-side image map for the object element. We do not want to render the image map's contents when the object is rendered, so we "hide" the map element within the object element's content. Consequently, the map element's contents will only be rendered if the object cannot be rendered.

<html xmlns="http://www.w3.org/2002/06/xhtml2">
      <title>The cool site!</title>
       <object data="navbar1.gif" type="image/gif" usemap="#map1"> 
         <map name="map1">
           Navigate the site: 
           <a href="guide.html" shape="rect" coords="0,0,118,28">
           Access Guide</a> 
           <a href="shortcut.html" shape="rect" coords="118,0,184,28">
           <a href="search.html" shape="circle" coords="184,200,60">
           | <a href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
           Top Ten</a>

We may want to render the image map's contents even when a user agent can render the object. For instance, we may want to associate an image map with an object element and include a text navigation bar at the bottom of the page. To do so, we define the map element outside the object:

      <title>The cool site!</title>
   </head> <body>
     <P><object data="navbar1.gif" type="image/gif"
     usemap="#map1"> </object>

     ...the rest of the page here...

     <map name="map1">
       <P>Navigate the site: <A href="guide.html"
       shape="rect" coords="0,0,118,28">Access
       Guide</a> | <A href="shortcut.html" shape="rect"
       coords="118,0,184,28">Go</A> | <A href="search.html"
       shape="circle" coords="184,200,60">Search</A>
       | <A href="top10.html" shape="poly"
       coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>

In the following example, we create a similar image map, this time using the area element. Note the use of alt text:

 <p><object data="navbar1.gif" type="image/gif"
   <p>This is a navigation bar.  </object>

<map name="map1">
 <area href="guide.html"
          alt="Access Guide" shape="rect" coords="0,0,118,28">
 <area href="search.html"
          alt="Search" shape="rect" coords="184,0,276,28">
 <area href="shortcut.html"
          alt="Go" shape="circle" coords="184,200,60">
 <area href="top10.html"
          alt="Top Ten" shape="poly"

The following example illustrates how image maps may be shared.

Nested object elements are useful for providing fallbacks in case a user agent doesn't support certain formats. For example:

 <p> <object data="navbar.png" type="image/png">
  <object data="navbar.gif" type="image/gif">
    text describing the image...

If the user agent doesn't support the PNG format, it tries to render the GIF image. If it doesn't support GIF (e.g., it's a speech-based user agent), it defaults to the text description provided as the content of the inner object element. When object elements are nested this way, authors may share image maps among them:

 <P> <object data="navbar.png" type="image/png"
  <object data="navbar.gif" type="image/gif" usemap="#map1">
     <map name="map1"> <p>Navigate the site:
      <a href="guide.html" shape="rect" coords="0,0,118,28">Access
      Guide</a> | <a href="shortcut.html" shape="rect"
      coords="118,0,184,28">Go</a> | <a href="search.html"
      shape="circle" coords="184,200,60">Search</a>
      | <a href="top10.html" shape="poly"
      coords="276,0,276,28,100,200,50,50,276,0">Top Ten</a>

The following example illustrates how anchors may be specified to create inactive zones within an image map. The first anchor specifies a small circular region with no associated link. The second anchor specifies a larger circular region with the same center coordinates. Combined, the two form a ring whose center is inactive and whose rim is active. The order of the anchor definitions is important, since the smaller circle must override the larger circle.

 <map name="map1"> <p> <A shape="circle"
coords="100,200,50">I'm inactive.</A> <A
href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm
active.</A> </map> 

Similarly, the nohref attribute for the area element declares that geometric region has no associated link.