description & Usage
The <area> tag is used to specify different areas within an image and add clickable features to those areas.
The <area> tag must be used within the <map> tag.
In other words, by using the <map> and <area> tags we can create an image map for our <img> tag, so that the user can experience different events by clicking on different parts of the image.
<img src="image.jpg" usemap="#samplemap">
<map name="samplemap">
<area shape="rect" coords="50,23,190,433" alt="green desc" href="desk.htm">
<area shape="rect" coords="250,600,2" alt="a young man" href="man.htm">
</map>The most important features of the <area> tag are:
- shape: To specify the shape of the area which can be rectangle (rect), circle (circle) and polygon (poly).
- coords: By means of this attribute you can select the pixel coordinates of the area.
For more information, you can refer to the shape and coords attribute pages.
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <area> |
Global Attributes
The <area> tag supports the HTML Global Attributes.
Event Attributes
The <area> tag supports the HTML Event Attributes.
Default CSS
Most browsers will display the <area> tag with the following default style:
