20. XHTML Image Map Attributes Module

Contents

20.1. Image Map Attribute Collection

This section is normative.

This collection adds 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" type="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" type="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>

20.1. Image Map Attribute Collection

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

ismap = "ismap"

This attribute indicates that the associated image 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. Screen coordinates are expressed as screen pixel values relative to the image, and start at (0,0) at the top left corner.

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.) should 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:

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 of the area. The number and order of values depends on the value of the shape attribute. Possible combinations:

rect: left-x, top-y, right-x, bottom-y.
circle: center-x, center-y, radius. When the radius value is a percentage, the actual radius value is calculated using the associated image's width and height. The radius is then the smaller value of the two.
poly: x1, y1, x2, y2, ..., xN, yN. If the first and last x and y coordinate pairs are not the same, user agents must 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. The coordinates of the top, left corner of an area are 0, 0.

Allow any element to be an image map?

Should we allow any element (such as <p>) that contains a number of hyperlinks to be an image map?

Implementation: RELAX NG