How to add HTML <area> coords Attribute

Use the coords attribute to specify the coordinates of each area in the image map.

Definition and Usage

The coords attribute specifies the coordinates of an area in an image map.

The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area.

Tip: The coordinates of the top-left corner of an area are 0,0.

Browser Support

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The area coords attribute</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>

</body>
</html>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin