AREA - Image Map Region

Syntax	<AREA>
Attribute Specifications	SHAPE=[ rect \| circle \| poly \| default ] (shape of region) COORDS=`Coords` (coordinates of region) HREF=`URI` (linked resource) TARGET=`FrameTarget` (frame to render link in) NOHREF (inactive region) ALT=`Text` (alternate text) TABINDEX=`Number` (position in tabbing order) ONFOCUS=`Script` (region received focus) ONBLUR=`Script` (region lost focus) common attributes
Contents	Empty
Contained in	MAP

The AREA element defines a map region in a client-side image map. Each map region is a piece of the image with a different action when clicked.

The SHAPE and COORDS attributes of AREA specify what part of the image is included in the region. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

default, which specifies the entire image;
circle, which specifies a circular region using COORDS="center-x, center-y, radius";
poly, which specifies a polygonal region using COORDS="x₁, y₁, x₂, y₂, ..., x_N, y_N".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

The HREF attribute specifies a link to another resource, such as an HTML document or a JPEG image. The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. The boolean NOHREF attribute indicates that the region has no link.

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the map region rather than a description of the region. For example, ALT="WDG Home" or ALT="Web Design Group" would be more appropriate than ALT="WDG Logo" for a map region whose link went to the WDG home page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images.

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

_blank renders the link in a new, unnamed window
_self renders the link in the current frame (useful for overriding a BASE TARGET)
_parent renders the link in the immediate FRAMESET parent
_top renders the link in the full, unframed window

In HTML 4.0, the TARGET attribute value is case-insensitive, so that _top and _TOP both have the same meaning. However, most browsers treat the TARGET attribute value as case-sensitive and do not recognize _TOP as having the special meaning of _top.

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. é) may be used as the ACCESSKEY value.

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the map region. A region with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

In addition to the core events common to most elements, AREA accepts the following event attributes for client-side scripting:

ONFOCUS, when the region receives focus;
ONBLUR, when the region loses focus.

More Information

Home | HTML Tutorials | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→ R7