HTML Tutorial
The <area>
tag defines an area inside an image map and provides a link or an action to that area.
<area>
The <area>
tag is used within an <img>
element and is accompanied by the usemap
attribute of the <img>
element. The usemap
attribute contains the URL of the image map, which defines the clickable areas on the image.
<area>
<area>
Create a clickable area on an image:
<img src="image.jpg" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Page 1">
</map>
Create a circle area:
<area shape="circle" coords="50,50,25" href="page2.html" alt="Page 2">
Create a polygon area:
<area shape="poly" coords="0,100,100,100,100,0" href="page3.html" alt="Page 3">
Simple HTML Example: Exploring the <area>
Tag
<!DOCTYPE html>
<html>
<body>
<img src="world_map.jpg" usemap="#world-map">
<map name="world-map">
<area shape="rect" coords="0,0,100,100" href="europe.html" alt="Europe">
<area shape="circle" coords="50,50,25" href="africa.html" alt="Africa">
<area shape="poly" coords="0,100,100,100,100,0" href="america.html" alt="America">
</map>
</body>
</html>