Area

End Tag: Omitted
Support Key: 2 | 3 | 3.2 | 4 | IE1 | M2.1 | N2 | O2.1
What is it?
Attributes
Tag Example
Parent/Content Model
Tips & Tricks
Browser Peculiarities
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =
Main Index | Element Tree | Element Index | HTML Support History


What is it?
The AREA element was first introduced in the Client Side Image Map proposal (an HTML Working Draft from Spry.) It was very quickly adopted in browsers and then in the HTML 3.2 recommendation. It specifies destinations for regions of an image via an HTML encoding system (instead of the older, more time consuming ISMAP method which requires an extra HTTP request and server-side processing map file.) It has the ability to specify the dimensions of a geometric shape within an image along with a hyperlink destination to be used when the shape is activated by the user.

An arbitrary number of AREA elements may be specified in a MAP structure, and if two AREAs overlap, the one which appears first in the MAP definition should take precedence in the region of intersection. Multiple AREAs may share the same hyperlink destination to create composite shapes.

Common Attributes
%Core%
2 | 3 | 3.2 | 4 | IE4B2 | M | N | O
%Events%
2 | 3 | 3.2 | 4 | IE4B1 | M | N | O
%Language%
2 | 3 | 3.2 | 4 | IE4 | M | N | O

Specific Attributes
Accesskey
2 | 3 | 3.2 | 4 | IE | M | N | O
Required? No
Description:
This is a method of giving access/focus to an active HTML element using a keyboard character. This is a common GUI paradigm also known as a "keyboard shortcut" or "keyboard accelerator" A single character is used as the value of this attribute. In addition, a platform-dependent key is usually used in combination with the ACCESSKEY character to access the functionality of the active field.
Values:
A single, case-insensitive alphanumeric character from a browser's character set.
Alt
2 | 3 | 3.2 | 4 | IE4B2 | M | N3 | O
Required? Yes
Description:
This is a way for browsers that can not display images to display the textual contents for each area as a substitute for the image.
Values: Alphanumeric text
Coords
2 | 3 | 3.2 | 4 | IE1 | M2.1 | N2 | O2.1
Required? No
Description:
This specifies the coordinate values in pixels appropriate to the accompanying SHAPE attribute to define a region of an image for hyperlinking. The coordinate system for Client Side Image Maps originates at the top, left corner of the image and values grow larger as you move down and to the right.
These are the corresponding SHAPE types and COORDS definition schemes:
   RECT, RECTANGLE: COORDS="left,top,right,bottom"
   CIRC, CIRCLE:            COORDS="center_x,center_y,radius"
   POLY, POLYGON:       COORDS="x1,y1,x2,y2,...,xn,yn"
[The Polygon values specify the successive coordinates of the polygon and have no explicit limit on number of vertices, but HTML limits attribute values to 1024 characters. If the first and last coordinates of a Polygon reference are not the same, then a final segment is implied to close it.]
Values: Positive integers given as a comma separated list of X-Y values
Href
2 | 3 | 3.2 | 4 | IE1 | M2.1 | N2 | O2.1
Required? No
Description:
This attribute indicates the URL to be loaded when the currently defined region is chosen in the image. If the URL is relative, the BASE is determined from the document containing the map (or from a BASE specified in that file), not from the file containing the IMG USEMAP tag that references the Map.
Values: An absolute or relative URL
NoHref
2 | 3 | 3.2 | 4 | IE1 | M2.1 | N2 | O2.1
Required? No
Description:
For those times when you want a particular area of an image to not point anywhere, the standalone NOHREF attribute is used INSTEAD of the HREF attribute. Any region of an image map that is not defined by an AREA tag is assumed to be NOHREF.
Values: NA
Shape
2 | 3 | 3.2 | 4 | IE1 | M2.1 | N2 | O2.1
Required? No
Description:
The SHAPE attribute defines the type of region to be defined for mapping in the current AREA tag. The value specified here decides the number of coordinates to list in the COORDS attribute. If the SHAPE attribute is absent the shape is assumed to be of type RECT
Values:
RECT [DEFAULT] | RECTANGLE | CIRC | CIRCLE | POLY | POLYGON
Tabindex
2 | 3 | 3.2 | 4 | IE4B1 | M | N | O
Required? No
Description:
"Tabbing" is a method of giving access/focus to an active HTML element using a standard keyboard sequence. All the active elements in a document can be cycled through using this sequence (ex: Windows TAB key.) The order of the active elements in this cycle is usually the order they occur in the document, but the TABINDEX attribute allows a different order to be established. The use of this attribute should create the following tabbing order cycle if the browser supports the attribute:
  1. Active elements using the TABINDEX attribute with positive integers are navigated first. Low values are navigated first.
  2. Active elements not specifying any TABINDEX attribute
Those elements carrying a DISABLED attribute or using negative TABINDEX values do not participate in the tabbing cycle.
Values: Positive or negative integers.
Target
2 | 3 | 3.2 | 4 | IE3A1 | M | N2 | O2.1
Required? No
Description:
This attribute specifies the named frame for the HREF hyperlink to jump to when activated.
Values: The Target reserved names apply.
Example
<map NAME="clientsidemap">
   <area SHAPE="rect" COORDS="0,0,100,100" HREF="http://www.foo.com/test.htm">
   <area SHAPE="circle" COORDS="95,105,5" HREF="http://www.foo.com/test2.htm">
   <area SHAPE="poly" COORDS="5,100,10,110,0,110" NOHREF>
</map>

<a HREF="cgi-bin/serverside.map"> <img SRC="image.gif" ISMAP USEMAP="#clientsidemap"> </a>
Parent Model
<map>
Content Model
This element does not accept any content
Tips & Tricks Browser Peculiarities
Boring Copyright Stuff...