Main Index |
Top Of Tree |
Tag Index |
Tag History
- What is it?
- The AREA tag is part of a HTML Working Draft from Spry that is now
in the HTML 3.2 Draft. 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 a geometric shape
in an image and the hyperlink destination to be used when the shape is
activated by the user.
An arbitrary number of AREA tags may be specified in a MAP structure, and if two
AREAs overlap, the one which appears first in the MAP definition takes
precedence in the region of intersection. Multiple AREAs may share the same
hyperlink destination to create composite shapes.
- Attributes
- Alt
- 2 | 3
| 3.2 | IE1
| M2.1 | N2
- 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. Even
though all browsers are listed here as supporting this tag, this
attribute does not yet seem to be implemented (assumption is if
image loading is turned off, this functionality would be exposed.)
- Values: Alphanumeric text
- Coords
- 2 | 3
| 3.2 | IE1
| M2.1 | N2
- 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 left.
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 | IE1
| M2.1 | N2
- 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 | IE1
| M2.1 | N2
- 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 | IE1
| M2.1 | N2
- 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
- Target
- 2 | 3
| 3.2 | IE3A1
| M | N2
- Required? No
- Description:
This attribute specifies the named frame for the HREF hyperlink to jump
to when activated.
- Values: The Target
reserved names apply.
Style Sheet Attributes
[More on Cascading Style Sheets]
- Class
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This represents an assigned semantic classification grouping(s) for the
current tag.
- Values:
Given as a comma separated list of alphanumeric characters. Class names
may contain spaces (multiple consecutive spaces treated as a single
space.)
- ID
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This assigns an alpha-numeric identifier that is unique
to this tag instance. Style sheets may use this attribute to reference
the current instance of this tag. Hyperlinks may also use this identifier
to serve as a destination.
- Values:
An alphanumeric string - initial character must be a letter followed
by alphabetic characters, digits, "-" or "."
characters. The allowable set of alpha-characters is restricted to the
A-Z and a-z set.
- Style
- 2 | 3
| 3.2 | IE3B1
| M | N4B3
- Required? No
- Description:
This attribute is a text string that provides rendering style
information for the current tag.
- Values:
Please see the description of
inline styles for more
information on how to use this attribute and its
possible values.
- 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/clientside.map"><img SRC="image.gif" ISMAP USEMAP="#clientsidemap"></a>
- Parent Model
- <map>
- Content Model
- This tag accepts no content
Tips & Tricks
- 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 tags. 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
attributes known as NOTAB, TABINDEX, and TITLE for several tags.
IE3 shows no signs that it actually supports these attributes in
practice (brief explanations of the attributes available at the
online reference URL.)
Boring Copyright Stuff...