Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

<area>

<area
accesskey=key
alt=text
class=type
coords=coords
dir=ltr|rtr
href=url
id=value
lang=language
name=areaname
nohref
shape=shape-type
style=style
tabindex=n
target=name
title=text>
</area>

Specifies the shape of a hotspot in an image map. A map can have several hotspots. If two hotspot areas overlap, the one that appears first in the map definition takes precedence.

You use this tag only within the <map> tag.

For example:

<area shape="rect" coords="50, 25, 150, 125" 
href="http://www.icl.com">
<area shape="rect" coords="50, 25, 150, 125" nohref> 
<area target="viewer" href="mydoc.htm" 
shape="circle" coords="50, 25, 150, 125">

Attributes

accesskey=key

Specifies a shortcut key for the link. You activate the link by pressing Alt and the access key together; like standard menu shortcuts in Windows applications.

alt=text

Specifies text that the browser will display in place of the picture if the user turns off Show Pictures or if the browser cannot display pictures. You should always enter alternative text. The text should give the function of the map region rather than a description of the region.

class=type

Indicates the class to which the tag belongs. You can use the class attribute in a style sheet to create different styles that you want apply to a single HTML tag. For example, you might create three different styles for a heading <hn> tag. See Using the class attribute as a selector for more details.

coords=coords

Specifies the co-ordinates (in pixels) that define the hot spot's shape. Measured from the upper left corner of the picture:

For a rectangle, the coordinates are left-x, top-y, right-x, bottom-y.

For a circle, the coordinates are centre-x, centre-y, radius.

For a polygon, the coordinates are in pairs (i.e. "x1,y1,x2,y2,x3,y3... ") which define the coordinates of the various points of the polygonal hotspot.

dir=ltr|rtr

Specifies the direction of text. This can be left-to-right (ltr) or right-to-left (rtl). For example, English characters are presented left-to-right, Hebrew characters are presented right-to-left.

href=url

Specifies the destination of the hot spot.

id=value

Specifies a unique name for the tag. No two tags can have the same id on a single page. The value must begin with a letter followed by any alphanumeric character, a hyphen, an underscore, a colon or a full stop. You use it to reference a unique style for a tag or to manipulate the tag with a script.

lang=language

Specifies which language the <area> tag uses. You can enter any valid ISO standard language abbreviation, for example, “en” for English, “de” for German and so on. For example, <span lang="es">hola! como esta?</span>.

This attribute helps search engines understand different languages as different languages rather than just misspelled English. It may also help spelling and grammar checkers and allow speech synthesizers to use language-dependent pronunciation rules.

nohref

Indicates that if a user clicks in this region, do not follow a link.

shape=shape-type

The shape of the hotspot. The default is a rectangle. One of:

Value…

Description…

RECT

Rectangle. Takes four co-ordinates: left, top, right, bottom

CIRC

Circle. Takes three co-ordinates: center-x, center-y, and radius

POLY

Polygon. Takes three or more pairs of co-ordinates denoting a polygonal region: x1, y1, x2,y2, …xn, yn

You also need to specify the co-ordinates for the area

style=style

Specifies style information. See Style sheets for more information.

tabindex=n

Specifies the position in the tabbing order.

target=name

You can associate a name with browser windows and frames that links can refer to. When you click on the link, the browser displays the destination page in the named window or frame. Only supported by browsers that can handle frames.

The target can be one of the following:

Value…

Description…

name

Loads the link into the window or frame with this name. The name must begin with an alphanumeric character

_blank

Load page into a new blank window

_parent

Load the page into the immediate parent of the page

_self

Load the page into the current window

_top

Load the page into the full body of the window

title=text

For information only. Some browsers display the title when you move the mouse over the tag (like a tool tip).