Learning HTML 3.2 by Examples, section 5 Descriptions of HTML 3.2 tags:

AREA - area in a clickable map (Not in HTML 2.0!)


To define an area ("hotzone") in a (client-side) clickable map.

Typical rendering

No direct visual effect, but when the user clicks in the specified area, the document mentioned in the AREA element is visited.

To help the user, a browser may display, in the status line, the contents of the ALT attribute as the mouse or other pointing device is moved over an area.

Basic syntax

<AREA HREF="URL" COORDS="x1,y1,x2,y2">

Possible attributes

attribute name possible values meaning notes
SHAPE RECT, CIRCLE, POLY shape of the area default is RECT
COORDS string of a form which depends on SHAPE coordinates for the area obligatory except for defaulted SHAPE
HREF URL address of a document acts as a hypertext link
NOHREF NOHREF means that this region has no action useful when you want to cut a hole in a hotzone region
ALT string textual description of the area obligatory

The meanings of SHAPE and the syntax and semantics of COORDS for each shape is the following:

SHAPE value form of area syntax of COORDS meaning of COORDS
SHAPE=RECT rectangle COORDS="x1,y1,x2,y2" the x and y coordinates of the upper left and lower right corner
SHAPE=CIRCLE circle COORDS="x0,y0,r" the x and y coordinates of the center and length of the radius
SHAPE=POLY polygon COORDS="x1,y1,x2,y2,x3,y3,..." the x and y coordinates of the vertices

The x and y coordinate values are measured in pixels from the upper left corner of the associated image. This means that the y values increase downwards.

Examples of various shapes:

SHAPE=RECT COORDS="0,0,9,9"a rectangle of 10 by 10 pixels in the top left corner of the image
SHAPE=CIRCLE COORDS="10,10,5"a circle with radius of 5 pixels and center at location (10,10)
SHAPE=POLY COORDS="10,50,15,20,20,50"a polygon (in this case, a triangle) with edge locations (10,50), (15,20), and (20,50)

Allowed context

MAP element.




<AREA HREF="guide.html" ALT="Guide" COORDS="0,0,118,28">


If two or more regions overlap, the region defined first in the map definition takes precedence over subsequent regions. Thus, to make part of an area defined by an AREA element inactive, put an AREA element with the NOHREF attribute before it.

A draft version of HTML 3.2 contained DEFAULT as a possible value of SHAPE, to be used to specify what happens if the user selects a point which does not belong to any area specified in other AREA elements. This was removed. The same effect can be achieved by using AREA SHAPE=RECT COORDS="0,0,width,height" as the last one within a MAP element. (Here width and height are the dimensions of the entire image in pixels.)

The HTML specifications allow percentage values for coordinates too, so that e.g. COORDS="0,0,100%,100%" could be used when specifying a rectangle which covers the entire image. However, many popular browsers incorrecly treat such values as pixels, i.e. ignore the % sign. Thus, don't use percentages. This isn't a serious restriction, since you (or the program you use) need to work with pixel values anyway when setting up a useful image map.

The ALT attribute is used to provide text labels which can be displayed in the status line as the mouse or other pointing device is moved over hotzones, or for constructing a textual menu for non-graphical browsers. Authors are strongly recommended to provide meaningful ALT attributes to support interoperability with speech-based or text-only user agents. But notice that the value must be just a string with no text markup.

Date of last update: 2010-12-16.
This page belongs to the free information site IT and communication, section Web authoring and surfing, by Jukka "Yucca" Korpela.