Client-side Image Map Module

Reference: *Client-side Image Map Module at the W3C

Elements in this Module

map, area

Attributes Declared on Elements in Other Modules

The Client-side Image Map Module declares additional attributes on elements in other Modules.

Description

IMPORTANT UPDATE: It seems as though browser support for valid XHTML 1.1 client-side image maps (CSIMs) is actually quite poor. In 2007, my testing led me to believe that major XHTML-compatible browsers would automatically interpret usemap attributes correctly (i.e. as having the IDREF attribute type) provided that the XHTML 1.1 document was served as "application/xhtml+xml". However, it seems as though newer browser releases use the old HTML URI fragment identifier method irrespective of the MIME type sent by the server. For example, I found that Firefox 2 recognised usemap as having type IDREF and hence behaved as expected. On the other hand, Firefox 3 (and Opera 9.5, for that matter) renders usable CSIMs only if usemap is assigned a URI fragment identifier, even if the "application/xhtml+xml" Content-Type is specified. This makes it impossible to write valid XHTML 1.1 CSIM code which will function in these browsers. I would therefore recommend that CSIM code be avoided in XHTML 1.1 documents.

The Client-side Image Map Module is used to create an image map within a document, where different areas within an image are links to different target URIs. The map is 'client-side' in that the user agent (client) determines which link to follow based upon the pixel coordinates clicked (or otherwise activated) within the image. This is in contrast to a server-side image map (see the Server-side Image Map Module) where the user agent instead sends the pixel coordinates of the click (activation) to a server-side handler, which determines which action to take based upon those coordinates.

Areas within the image are specified using area or a elements within a containing map element. To create the image map, this map element must then be associated with the image in question, which is done by setting the usemap attribute of this image (included as an img, input type="image" or object element) to the id attribute of the map.

It should also be noted that (despite the name of the module) map elements need not be used to create image maps and may be used without (or perhaps in addition to) an associated image to define, for example, text-based navigation menus.