Area tag <area> to create clickable hyper links on image maps

<img src=map.jpg  usemap="#sections">
<map name="sections">
<area shape="circle" coords="62,39,25" href="my_area1.php"
 alt="Going to Area 1">
<area shape="rect" coords="213,36,378,93" href="my_area2.php"
 alt="Going to Area 2">
<area shape="poly" coords="255,224,320,224,321,200,255,224"
 href="my_area3.php" alt="to Area 3">
 </map>

We can mark different areas in a map or image and generate a clickable areas by using html tag.

We can point different areas of a image map to different pages by creating hyper links on the map.

Attributes of <AREA>:

Attribute	Description
ALT	A text to be displayed to browser when Image is not shown
COORDS	A set of coordinates of the area on the image. The set value depens on the SHAPE attribute.
HREF	URL of the document linked to
HREFLANG	If href tag is there then this specifies the language of the target.
NAME	It can be refered by script or dom.
MEDIA	About the linked resources
HREFLANG	If href tag is there then this specifies the language of the target.
SHAPE	rect\|circle\|poly\|default: Based on this COORDS take set of values, for RECT it takes x1,y1,x2,y2,x3,y3,x4,y4. For CIRCLE it is x,y,r ( r is the radious from center at x, y ). For poly it is x1,y1,x2,y2... For default it is the full image.
TARGET	_self\|_blank\|_parent\|_top: How the linked document to open.

Let us try with this example.

<area shape='rect' cords='20,20,50,60'>

Here we have defined one rectangular shape with coordinates given in cords attribute.
We can add the target or href to the above tag like this

<area shape='rect' cords="20,20,50,60" href='mypage.php'>

The above area once clicked the mypage.php page will open We can also add one alternate text to the area tag like this.

<area shape='rect' cords="20,20,50,60" href='mypage.php'  alt='About my page'>

Area tag is used along with a <map> tag in creating clickable hyper links in an image.

Area html tag for hyper links on images

Attributes of <AREA>:

Subscribe