HTML <area> tag
Example
An image map, with clickable areas:
<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" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map> |
Try it yourself!
|
Definition and Usage
The <area> tag defines a region in an image map.
The area element is always nested inside a <map> tag.
Browser Support
The <area> tag is supported in all major browsers.
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
Note: The usemap attribute in the <img> tag refers to the id
or name (browser dependant) attribute in <map>, therefore we have added
both the id and name attributes to <map>.
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.
|
