<AREA> | NN all IE all HTML 3.2
<AREA> | HTML End Tag: Forbidden
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.

Example
    <MAP name="nav">
    <AREA coords="20,30,120,70" href="contents.html" target="display">
    <AREA coords="20,80,145,190" href="contact.html" target="display">
    </MAP>
Object Model Reference
    [window.]document.links[i]
    [window.]document.getElementById(elementID)
Element-Specific Attributes

alt | coords | href | nohref | shape
target |  |  |  |

Element-Specific Event Handler Attributes
None.

accesskey | NN 6 (see text) IE 4/5 HTML 4 (see text)
accesskey="character" | Optional
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.

Example
    <A href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</A>
    		<H2 class="subsection" accesskey="2" tabindex="0">Part Two</H2>
Value
Single character of the document set.
Default
None.
Object Model Reference
    [window.]document.links[i].accessKey
    		[window.]document.anchors[i].accessKey
    		[window.]document.formName.elementName.accessKey
    		[window.]document.forms[i].elements[j].accessKey
    		[window.]document.getElementById(elementID).accessKey

alt | NN 6 IE 3 HTML 3.2
alt="textMessage" | Required
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.
Example
    <AREA coords="20,30,120,70" href="contents.html" target="display"
    alt="Table of Contents">
Value
Any quoted string of characters.
Default
None.
Object Model Reference
    [window.]document.getElementById(elementID).alt

coords | NN all IE all HTML 3.2
coords="coord1, ... coordN" | Optional
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.

Example
    <AREA coords="20,30,120,70" href="contents.html" target="display">
Value
Each coordinate is a length value, but the number of coordinates and their order depend on the shape specified by the shape attribute, which may optionally be associated with the element. For shape="rect", there are four coordinates (left, top, right, bottom); for shape="circle", there are three coordinates (center-x, center-y, radius); for shape="poly", there are two coordinate values for each point that defines the shape of the polygon (x1, y1, x2, y2, x3, y3,...xN, yN).
Default
None.
Object Model Reference
    [window.]document.getElementById(elementID).coords

href | NN all IE all HTML 3.2
href="URI" | Required
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.
Example
    <AREA coords="20,30,120,70" href="contents.html" target="display">
Value
Any valid URI, including complete and relative URLs, anchors on the same page (anchor names prefaced with the # symbol), and the javascript: pseudo-URL in scriptable browsers to trigger a script statement rather than navigate to a destination.
Default
None.
Object Model Reference
Other link object properties allow for the extraction of components of the URL, such as protocol and hostname. See the Link object in Chapter 9.
    [window.]document.links[i].href
    [window.]document.getElementById(elementID).href

lang | NN 3 IE 4 HTML 4
lang="languageCode" | Optional
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.
Example
    <SPAN lang="de">Deutsche Bundesbahn</SPAN>
Value
Case-insensitive language code.
Default
Browser default.
Object Model Reference
    [window.]document.getElementById(elementID).lang

nohref | NN all IE all HTML 3.2
nohref | Optional
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.
Example
    <AREA coords="20,30,120,70" nohref>
Value
The presence of this attribute sets its value to true. Extend for XHTML compliance by using nohref="nohref".
Default
Off.
Object Model Reference
    [window.]document.getElementById(elementID).noHref

shape | NN all IE all HTML 3.2
shape="shapeName" | Optional
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.
Example
    <AREA shape="poly" coords="20,20,20,70,65,45" href="contents.html"
    target="display">
Value
Case-insensitive shape constant. Each implementation defines its own set of shape names and equivalents, but there are common denominators across browsers (circle, rect, poly, and polygon).
Default
rect
Object Model Reference
    [window.]document.getElementById(elementID).shape

target | NN all IE all HTML 3.2
target="windowOrFrameName" | Optional
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.

Example
    <AREA coords="20,30,120,70" href="contents.html" target="display">
    <AREA coords="140,30,180,70" href="index.html" target="_top">
Value
Case-sensitive identifier when the frame or window name has been assigned via the target element's name and id attributes. Four reserved target names act as constants:
Default
_self
Object Model Reference
    [window.]document.links[i].target
    [window.]document.getElementById(elementID).target