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.
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:
Active elements using the TABINDEX attribute with positive integers are
navigated first. Low values are navigated first.
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.
It is usually a good idea to include an ISMAP as an alternative
to Client Side Image maps, but authors sometimes may not have access
to run binaries on their host machines. In this case especially, and
in general, a THIRD alternative should be authored to allow navigation
via text links for users that do not have image capability.
It is interesting to note the overlap in the COORDS attribute names.
There doesn't seem to be any advantage to using either.
Text only browsers such as Lynx allow users to navigate a client-side
image map by using the ALT attribute for the AREA element. Aside from this
being a required attribute under the HTML 3.2 DTD, this accessibility
feature is a GREAT argument in the favor of ALWAYS
using this attribute.
Browser Peculiarities
The Internet Explorer 3.0 online tag reference lists support for
TABINDEX and TITLE for several elements. IE3 shows no signs that
it actually supports these attributes in practice.
If an image is used as an image map in a document, the coordinates
specified in the AREA elements must represent the coordinates on
the image AS IT WILL BE USED in the document. Eg: if different
HEIGHT and/or WIDTH attributes are specified in the IMG element the
map coordinates must reflect this. Take care - if percentage heights
and widths are specified, it will be almost IMPOSSIBLE to
give accurate coordinates in the client side image map. This warning
applies to all browsers surveyed that support client-side image maps.
Netscape does not support the RECT and CIRC values for the SHAPE attribute.