HTML <area> Tag

Description:

The <area> tag is used for defining an area in an image map.

This tag is used in conjunction with the <map> tag and <img> tag to create an image map.

 

Specific Attributes:

Attribute Definition
shape

Specifies the shape of an area.
Possible Values:

  • default
  • rect
  • circle
  • poly
coords Specifies the coordinates of an area.
nohref Specifies that the area has no link.

Other Attributes:

Attribute Definition
name Assigns a name to the element.
class Specifies a classname for an element.
id Specifies a unique id for an element.
dir

Specifies the text direction for the content in an element.
Possible Values:

  • rtl  (Right to Left)
  • ltr  (Left to Right)
lang Specifies a language code for the content in an element.
style Specifies an inline style for an element.
title Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").
alt Specifies an alternate text for an area
href Specifies the destination of a link in an area.
target

Specifies the target frame to load the page into.
Possible Values:

  • _blank
  • _parent
  • _self
  • _top
tabindex Specifies the tab order of an element.
accesskey Specifies a keyboard shortcut to access an element.

Example Code:

<img alt="Shapes" height="102" src="image/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />

<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
</map>

Result
Shapes Circle Rectangle Triangle Default