A map element defines a client-side image map that is ultimately associated with an image or other object that occupies space on the page. The only job of the map element is to assign a name and a tag context for one or more area element definitions. Each area element defines how the page should respond to user interaction with a specific geographical region of the image or other object.

A client-side image map area can act like an a element link in that an area can link to a destination or javascript: pseudo-URL and assign another frame or window as the target for loading a new document. In fact, in the original scripting document object model, an area element is referenced as a link. It is not uncommon to use client-side area maps in a navigation bar occupying a slender frame of a frameset. This allows an artist to be creative with a menu design, while giving the page author the power to turn any segment of a larger image into a special-purpose link.

A single character key that either gives focus to an element (in some browsers) or activates a form control or link action. The browser and operating system determine if the user must press a modifier key (e.g., Ctrl, Alt, or Command) with the access key to activate the link. In Windows versions of IE 4 and later and Netscape 6, the Alt key is required and the key is not case-sensitive. For Macintosh versions of IE 5 and later and Netscape 6, the Ctrl modifier key is required to effect the action.

Although accesskey is listed here as a widely shared attribute, that isn't strictly the case across all implementations. HTML 4 and Netscape 6 recognize this attribute only for the following elements: a, area, button, input, label, legend, and textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, object, select, span, table, and td (but removes label and legend). IE 5 adds every other renderable element, but with a caution: except for input and other form-related elements, you must also assign a tabindex attribute to the IE 5 and later element (even if simply a value of zero for all) to let the accelerator key combination bring focus to the element.

Nongraphical browsers can use the alt attribute setting to display a brief description of the meaning of the (invisible) image's hotspots. At one time, it was thought that the alt message might be displayed in the browser's status bar by default when the area had focus or the cursor rolled over the area. That function is now typically performed by onmouseover event handlers and scripts. Keep in mind that recent handheld computers usually have nongraphical browsers (or allow graphics to be turned off for improved performance). Don't ignore the graphically impaired.

Although the formal W3C definition for the coords attribute of an area element states that the attribute is optional, that doesn't mean that you can omit this attribute and expect an area to behave as it should. The coords attribute lets you define the outline of the area to be associated with a particular link or scripted action. Some third-party authoring tools can assist in determining the coordinate points for a hot area. You can also load the image into a graphics program that displays the cursor position in real time and then transfer those values to the coords attribute values.

Coordinate values are entered as a comma-delimited list. If two areas overlap, the area that is defined earlier in the HTML code takes precedence.

The URI of the destination of a link associated with the area. In a browser, when the URI is an HTML document, the document is loaded into the current (default) or other window target (as defined by the target attribute). For some other file types, the browser may load the destination content into a plugin or save the destination file on the client machine. Because IE 3 and Navigator (up to Version 4) treat area elements as a elements, the href attribute must be defined in the area element for scripts in the old DOM to access various properties about the URL and for event handlers (such as onmouseover) to work.

The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

Tells the browser that the area defined by the coordinates has no link associated with it (as not including any href attribute does). When you include this attribute, scriptable browsers no longer treat the element as a link. When an area element lacks an href attribute, the element no longer responds to user events. In IE 4 and later and Netscape 6, you can turn this attribute on and off from a script by setting the corresponding noHref property to true or false.

Defines the shape of the client-side area map whose coordinates are specified with the coords attribute. The shape attribute tells the browser how many coordinates to expect.

If the destination document is to be loaded into a window or frame other than the current window or frame, you can specify where the destination document should load by assigning a window or frame name to the target attribute. Target frame names must be assigned to frames and windows as identifiers. Assign names to frames via the name and id attributes of the frame element; assign names to new windows via the second parameter of the window.open( ) scripting method. If you omit this attribute, the destination document replaces the document containing the link. This attribute is applicable only when a value is assigned to the href attribute of the element.

An area element can have only one destination document and one target. If you want a link to change the content of multiple frames, you can use an area element's onclick event handler (check Chapter 9 for supported browser versions) or a javascript: pseudo-URL to fire a script that loads multiple documents. Set the location.href property of each frame to the desired URL.

Strict DTDs for HTML 4 and XHTML do not support the target attribute of any element because frames and windows are outside the scope of pure document markup. In fact, framesetting documents will not validate in the strict environmentthus the purpose of the separate frameset DTDs for HTML 4 and XHTML. If your documents must validate with these strict DTDs, and you wish to support targets, use scripts to set target properties of links, image maps, and forms after the page has loaded.