HTML <area> tag

The <area> tag is used to set an area inside an imagemap. An imagemap is an image with a few different clickable regions that when clicked on will link to different places. The <area> tag is used to set the coordinates for these regions as well as where they link to.

You can see a full imagemap example at our HTML <map> tag reference page.

NOTE: The <area> tag should always be placed inside a <map> tag.

NOTE: The <area> tag has no closing tag.

Attributes

Attribute Possible values Description
alt altText Required. Sets alternative text for a particular area of an imagemap in case the image does not load
coords theCoords Denotes a set of coordinates for a link
href url Denotes the location that a set of coordinates will link to
nohref nohref Specifies that a set of coordinates does not link to anything
shape rect, circle, poly Denotes the shape for a set of coordinates
target _blank, _self, _parent, _top Denotes where a link will open

Standard attributes

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

For more information on standard attributes, check out our HTML standard attributes reference page.

Event attributes

onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

For more information on event attributes, check out our HTML event attributes reference page.

Example

<area shape="rect" coords="48, 48, 86, 90" href="http://www.bouquetoffruits.com/fruit-facts/ grape-facts.html" target="_blank" alt="Read about grapes" />

Tips & notes

To figure out a set of coordinates to use as part of an imagemap use an image manipulation program like Photoshop or GIMP

If you're going to use an imagemap to link to external pages (pages not on your own website) it is better to have them open in a new window so attention is not fully diverted from your website.

Web Reference
  1. CSS reference
  2. RSS reference
  3. HTML reference


© Copyright 2011-2012 Landofcode.com
Terms of use | Privacy policy | Copyright information | Make a donation