AREA - Image Map Region

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

• AREA in W3C HTML 4.0 Recommendation
• AREA in W3C HTML 3.2 Recommendation
• AREA in WDG HTML 3.2 Reference
• AREA in Learning HTML 3.2 by Examples