HTML Area tag


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" />

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
if shape="circ" then
if shape="poly" then
Specifies the coordinates for the clickable area STF
href URL Specifies the target URL of the area STF
nohref true
Excludes an area from the image map STF
shape rect
Defines the shape of the area STF
target _blank
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

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
HTML Area tag Reviewed by 1000sourcecodes on 02:16 Rating: 5
Powered by Blogger.