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

HTML Area Shape Values Description
default Specifies that the entire region within an image is clickable
Rect Specifies a rectangular clickable region within the image
Circle Specifies a circular clickable region within the image
Poly Specifies a polygonal clickable region within the image

Example of HTML Area Tag Shape Attribute

HTML Area Tag Shape Attribute code Output

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>
Click on the shapes to watch them:

Shapes

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

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

Tagged , , , , , , , , , , , , , , , . Bookmark the permalink.