HTML area tag Shape attribute

The HTML Area Tag Shape attribute defines the shape of the area, within an image, that can be clicked.

In other words we can say that by using the HTML Area Tag Shape Attribute we define the shape of clickable area within an image.

HTML Area tag Shape Attribute is always used with the HTML Area Coords Attribute to define the shape, size and even the placement of the area.

 Syntax of HTML Area Tag Shape Attribute

<area shape=”default|rect|circle|poly”>

HTML Area Tag Shape Attribute Values

Example of HTML Area Tag Shape Attribute

Click on the shapes to watch them:

<img alt="Shapes" src=" HTMLAreaTagEx.gif" usemap="#shapemap" width="145" height="126" />
<map name="shapemap">
<area coords="25,30,12" shape="circle" href="Circle.jpg" target="_blank" type="image/gif" />
<area coords="62,30,82,40" shape="rect" href="triangle.jpg" target="_blank" type="image/gif" />
<area coords="115,35,10" shape="circle" href="star.jpg" target="_blank" type="image/gif" />
</map>

Here in the above HTML Area Shape Attribute example we can see that we have defined the “Circle” and “Star” containing image areas as “Circle” format and the area having the triangle as “Rect” format.

HTML Area Tag Shape Attribute Supporting Browsers