AREA elements specify the geometric regions of an image
map and their associated links.
The AREA element attributes are:
shape - Shapes include default (specifies the entire map),
rect, circle, and poly.
coords - The position of the shape within the map. Values are
in lengths. Lengths are measured in pixels and are separated by commas.
The number and order of the
values is determined by the shape being defined. All coordinates
are defined as they relate to the top left corner of the image, which
has coordinates of 0,0.
In the example to the right, each square represents one
pixel in an image. Each pixel has it's own coordinate
which is used to describe the shape of the image map.
Coordinate:
Example:
Left - X
Top - Y
Right - X
Bottom - Y
Left - 0
Top - 0
Right - 2
Bottom - 1
A rectangular shape is described by the coordinates,
thus, the area outlined in blue in the example would
be described:
<AREA SHAPE = RECT
COORDS = "0,0,2,1"
href - The URL associated with the shape.
nohref - The area has no associated link.
alt - A description of the shape/linked area.
<IMG SRC = "wdvlmap.gif"
WIDTH = 157
HEIGHT = 194
ALT = ""
BORDER = "0"
USEMAP = "#WDVL"
>
<MAP NAME="WDVL">
<AREA SHAPE = RECT
COORDS = "20,7,111,54"
HREF = "http://WDVL.com/"
ALT = "Web Developer's Virtual Library"
>
<AREA SHAPE = RECT
COORDS = "24,54,116,100"
HREF = "/Authoring/HTML/"
ALT = "HTML"
>
<AREA SHAPE = RECT
COORDS = "53,102,153,141"
HREF = "/Authoring/DHTML/"
ALT = "DHTML"
>
<AREA SHAPE = RECT
COORDS = "14,142,99,189"
HREF = "/Authoring/Languages/XML.html"
ALT = "XML"
>
<AREA SHAPE = default
HREF = "/Authoring/HTML/4/Tags/area.html"
ALT = ""
>
</MAP>
The AREA element attributes are:
In the example to the right, each square represents one
pixel in an image. Each pixel has it's own coordinate
which is used to describe the shape of the image map.