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:CDATA.
[A single, case-insensitive character from a browser's character set.]
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:CDATA.
[Positive integers given as a comma separated list of X-Y values]
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:CDATA.
[Either an absolute or relative URL. All URLs should be URL encoded where required.]
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.
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 - Rectangular region CIRC | CIRCLE - Circular region POLY | POLYGON - Polygon region DEFAULT - Same as RECT (RECT coordinates are used),
but indicated HREF is used for all non-defined areas of image.
Description:
This attribute specifies that the dotted focus rectangle for this shaped
hyperlink should be suppressed when the this AREA has keyboard focus.
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]
[X1|X1.1]
[IE3A1|M|N2|O2.1]
Standards Details:
In Transitional and Frameset HTML 4.x/XHTML DTDs only. Dropped in XHTML 1.1
Required? No
Description:
This attribute specifies the named frame for the HREF hyperlink to jump
to when activated.
Historically, it has been 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 and Client-side Image Maps now have
very wide historical support.
Authors should consider creating a THIRD alternative to allow
navigation via text links for users that do not have image capability.
DTD Note: HTML 3.2 lists these values for the SHAPE
attribute as valid: RECT, CIRCLE, POLY.
DTD Note: HTML 4.0 lists these values for the SHAPE
attribute as valid: RECT, CIRCLE, POLY, DEFAULT.
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 online tag reference in the 3.0 timeframe
listed support for TABINDEX and TITLE for several elements. IE3 never
showed any signs that it actually supported these attributes in practice.
[Test]
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 RECTANGLE and CIRC values for the SHAPE attribute.
Internet Explorer does not support the DEFAULT value for the SHAPE attribute.
[Test]
Netscape DOES seem to allow the DEFAULT value for the SHAPE
attribute, but appears to require that it be placed at the END
of the list of AREA elements. If it is not, the HREF for the DEFAULT
area shape will be used for the entire image. Opera appears to allow
DEFAULT as a SHAPE attribute value anywhere in the list of AREA elements.
The Mosaic browsers only understood the RECT, RECTANGLE and POLYGON values
for the SHAPE attribute.
[Test]
Creating "cut-out" shapes: If you wish to create a geometric shape,
and then have a region inside defined within as NOHREF, the NOHREF
region must occur FIRST - If it is placed after, the NOHREF
region will still be active. This appears to hold true for the browsers
that support CSIM. Internet Explorer 4.0, however, had a bug - "cut-out"
shapes did not work at all, whether the NOHREF occurred before OR after
the active region.
[Test]
Linefeed and Carriage Return handling ( and
respectively) for the ALT attribute:
- Internet Explorer: All literal/unencoded or
encoded CR/LFs are maintained and displayed as intended.
- Netscape: All unencoded or encoded CR/LFs are
collapsed to nothing in ALT display (not the normal method for
spacing-character collapsing - usually it would collapse to a
single space.)
[Test]
Handling of ALT and TITLE attribute tooltip rendering for AREA element: IE 4+: ALT content rendered if present. TITLE
content rendered if present. If both present, only ALT is rendered. NS 3.x: TITLE and ALT ignored. NS 4.x: ALT attribute rendered, TITLE ignored. NS 6.x+: TITLE rendered, ALT ignored. O -4.x: TITLE and ALT ignored. O 5.x+: TITLE attribute content rendered as tooltip
and in status toolbar.