21. XHTML Image Map Attributes Module

Contents

This section is normative.

This module defines a collection of attributes that specify that an embedded image may be used as an image map, so that clicking on different parts of the image causes different hyperlinks to be activated.

Note that in the following example, if the image is unavailable for any reason, the fallback properties of the @src attribute mean that the nl element will be displayed instead of the image, thus making the page still useful:

Example

<html xmlns="http://www.w3.org/2002/06/xhtml2">
   <head>
      <title>The cool site!</title>
   </head> 
   <body>
     <p src="navbar1.png" srctype="image/png" usemap="#map1"> 
         <nl id="map1">
           <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>
      </p>
   </body>
</html> 

Note that an li in an nl is not required to have an @href attribute. In that case, the relevant region of the image is inactive.

Example

<p src="image.png" srctype="image/png" usemap="#map1">
   <nl id="map1">
   <label>Navigation that has an inactive ring</label>
   <li shape="circle" coords="100,200,50">I'm inactive.</li>
   <li href="outer-ring-link.html" shape="circle" 
       coords="100,200,250">
       I'm active.
   </li>
   </nl>
</p>

Note that W3C is working on profiles of XHTML that include versions of SVG [SVG], which include more structured ways of creating imagemap-like behavior.

21.1. Image Map Attribute Collection

usemap = URI

This attribute associates an image map with an nl element. The value of usemap should match the value of the @id attribute of an nl element that contains one or more li elements with @shape and @coords attributes.

If accessing the URI fails or the referenced element is not an nl element, then the associated @src attribute is considered to have failed as well, so that the nested content will be processed instead.

ismap = "ismap"

This attribute indicates that the associated embedded resource is to be treated as a "server-side image map". When selected, the coordinates within the element that the user selected are sent to the server where the document resides. Coordinates are expressed as pixel values relative to the embedded resource, and start at (0,0) at the top left corner.

When an ismap attribute is specified, click events are not delivered to the embedded resource, regardless of its type.

In the following example, the active region defines a server-side image map. A click anywhere on the image will cause the click's coordinates to be sent to the server.

<p href="http://www.example.com/cgi-bin/map"
      src="map.png" ismap="ismap">
   Our location.
</p>

The location clicked is passed to the server as follows. The user agent derives a new URI from the URI specified by the @href attribute of the element, by appending `?' followed by the x and y coordinates, separated by a comma. The link is then actuated using the new URI. For instance, in the given example, if the user clicks at the location x=10, y=27 then the derived URI is "http://www.example.com/cgi-bin/map?10,27".

User agents that do not offer the user a means to select specific coordinates (e.g., non-graphical user agents that rely on keyboard input, speech-based user agents, etc.) must send the coordinates "0,0" to the server when the link is activated.

shape = "default|rect|circle|poly"
This attribute specifies the shape of a region. Possible values:
coords = Coordinates
This attribute specifies the position and shape of the area. The number and order of values depends on the value of the @shape attribute. Possible combinations:

Coordinates are relative to the top, left corner of the object. All values are of type Length. All values are separated by commas. The coordinates of the top, left corner of an area are 0, 0.

Define ismap better

Can we define ismap better?

Implementation: RELAX NG, XML Schema