Contents
This section is normative.
The Client-side Image Map Module provides elements for client side image maps. It requires that the Image Map Attribute Collection and the Embedding Attribute Collection (or the Object Module) be included. The Client-side Image Map Module supports the following elements:
| Elements | Attributes | Minimal Content Model |
|---|---|---|
| area | Common, Map, alt* (Text), nohref ("nohref") | EMPTY |
| map | I18N, Events, Edit, Embedding, Bi-directional, class (ClassName), id* (ID), title (Text) | ((Heading | Block) | area)+ |
When this module is used, the map element is added to the Inline content set of the Text Module.
Implementation: DTD
The area element defines a geometric region associated with an image map, and optionally associates that region with events or external references.
Attributes
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:
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.
Attributes
The class attribute can be used for different purposes in XHTML, for instance as a style sheet selector (when an author wishes to assign style information to a set of elements), and for general purpose processing by user agents.
For instance in the following example, the p element is used in conjunction with the class attribute to identify a particular type of paragraph.
<p class="note"> These programs are only available if you have purchased the advanced professional suite. </p>
Style sheet rules can then be used to render the paragraph appropriately, for instance by putting a border around it, giving it a different background colour, or where necessary by not displaying it at all.
The id attribute has several roles in XHTML:
As an example, the following headings are distinguished by their id values:
<h id="introduction">Introduction</h> <p>...</p> <h id="events">The Events Module</h> <p>...</p>
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers should display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.
Example of the use of title:
<a href="/Jakob/" title="Author biography">Jakob Nielsen</a>'s Alertbox for January 11, 1998
The title attribute has an additional role when used with the link element to designate an external style sheet. See the section on links and style sheets for details.
The presence of the usemapattribute 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:
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.).
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">
<head>
<title>The cool site!</title>
</head>
<body>
<p src="navbar1.png" type="image/png" usemap="#map1">
<map id="map1">
<nl>
<label>Navigate the site:</label>
<li href="guide.html" shape="rect" coords="0,0,118,28">
Access Guide</li>
<li href="shortcut.html" shape="rect" coords="118,0,184,28">
Go</li>
<li href="search.html" shape="circle" coords="184,200,60">
Search</li>
<li href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
Top Ten</li>
</nl>
</map>
</p>
</body>
</html>
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:
<html xmlns="http://www.w3.org/2002/06/xhtml2">
<head>
<title>The cool site!</title>
</head>
<body>
<p src="navbar1.gif" type="image/gif" usemap="#map1">
...the rest of the page here...
<map id="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>
</map>
</p>
</body>
</html>
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" usemap="#map1">
<p>This is a navigation bar.<p>
</object></p>
<map id="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"
coords="276,0,276,28,100,200,50,50,276,0"/>
</map>
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...
</object>
</object></p>
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" usemap="#map1">
<object data="navbar.gif" type="image/gif" usemap="#map1">
<map id="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></p>
</map>
</object>
</object></p>
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 id="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></p> </map>
Similarly, the nohref attribute for the area element declares that geometric region has no associated link.