The <area> tag
Definition and Usage
Defines a region in an image map.
Differences Between HTML and XHTML
In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.
Tips and Notes
This element is always nested inside a <map> tag.
Note: The usemap
attribute in <image> refers to the id or name (browser
dependant) attribute
in <map>, therefore we have added both the id and name attributes to <map>.
Example
Source |
Output |
<p>Click on one of the planets:</p> <img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
|
Click on one of the planets:
|
Required Attributes
DTD indicates in which DTD the attribute is
allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute |
Value |
Description |
DTD |
alt |
text |
Specifies an alternate text for the area |
STF |
Optional Attributes
Attribute |
Value |
Description |
DTD |
coords |
if shape="rect" then
coords="left,top,right,bottom"if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn" |
Specifies the coordinates for the clickable area |
STF |
href |
URL |
Specifies the target URL of the area |
STF |
nohref |
true
false |
Excludes an area from the image map |
STF |
shape |
rect
rectangle
circ
circle
poly
polygon |
Defines the shape of the area |
STF |
target |
_blank
_parent
_self
_top |
Where to open the target URL.
- _blank - the target URL will open in a new window
- _self - the target URL will open in the same frame as it was clicked
- _parent - the target URL will open in the parent frameset
- _top - the target URL will open in the full body of the window
|
TF |
Standard Attributes
id, class, title, style, dir, lang, xml:lang, tabindex,
accesskey |
For a full description, go to Standard
Attributes.
Event Attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur |
For a full description, go to Event Attributes.
|