Example
An image-map, with clickable areas:<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map 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> |
Definition and Usage
The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).The area element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the map element's name attribute, and creates a relationship between the image and the map.
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.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.Attribute | Value | Description | DTD |
---|---|---|---|
alt | text | Specifies an alternate text for an area | STF |
Optional Attributes
Attribute | Value | Description | DTD |
---|---|---|---|
coords | coordinates | Specifies the coordinates of an area | STF |
href | URL | Specifies the destination of a link in an area | STF |
nohref | nohref | Specifies that an area has no associated link | STF |
shape | default rect circle poly | Specifies the shape of an area | STF |
target | _blank _parent _self _top | Specifies where to open the linked page specified in the href attribute | TF |
Standard Attributes
The <area> tag supports the following standard attributes:Attribute | Value | Description | DTD |
---|---|---|---|
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
tabindex | number | Specifies the tab order of an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Event Attributes
The <area> tag supports the following event attributes:Attribute | Value | Description | DTD |
---|---|---|---|
onblur | script | Script to be run when an element loses focus | STF |
onclick | script | Script to be run on a mouse click | STF |
ondblclick | script | Script to be run on a mouse double-click | STF |
onfocus | script | Script to be run when an element gets focus | STF |
onmousedown | script | Script to be run when mouse button is pressed | STF |
onmousemove | script | Script to be run when mouse pointer moves | STF |
onmouseout | script | Script to be run when mouse pointer moves out of an element | STF |
onmouseover | script | Script to be run when mouse pointer moves over an element | STF |
onmouseup | script | Script to be run when mouse button is released | STF |
onkeydown | script | Script to be run when a key is pressed | STF |
onkeypress | script | Script to be run when a key is pressed and released | STF |
onkeyup | script | Script to be run when a key is released | STF |