From http://www.w3schools.com (Copyright Refsnes Data)

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

Internet Explorer Firefox Opera Google Chrome Safari

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.

From http://www.w3schools.com (Copyright Refsnes Data)