Contents
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>
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.
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