The Web Design Group

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)
  • ACCESSKEY=Character (shortcut key)
  • 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 that may have 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

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 an important accessibility feature for users who do not load images.

The TARGET attribute is used with frames to specify the frame in which 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:

In HTML 4, 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. &eacute;) 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:

More Information