The HTML coords attribute is used with the <area> tag to specify the coordinates of a clickable area within an image map.
Definition and Usage
➔ It determines the shape, size, and location of an area in conjunction with shape properties.
➔ The values of the coords attribute depend on the following values specified in the shape property:
- rect: Specifies a rectangular area.
coords format: x1,y1,x2,y2 where (x1, y1) is for the top-left corner and (x2, y2) is for the bottom-right corner coordinates. - circle: Specifies a circular area.
coords format: x,y,radius where (x, y) is the center, and radius is the radius of the circle. - poly: Specifies a polygonal area.
coords format: x1,y1,x2,y2,...,xn,yn where x,y is a series of coordinate pairs that define the vertices (edges) of the polygon. - default: Specifies the entire area of the image that is not defined by any other area shape.
coords format: The value is not required, as it covers the remaining area.
Syntax
//In HTML
<img src="myimage.jpg" alt="Home image" usemap="#mymap">
<map name="mymap">
<!-- A clickable rectangle area -->
<area shape="rect" coords="40,40,100,100" alt="Rectangle Area" href="rectanglepage.html">
<!-- A clickable circle area -->
<area shape="circle" coords="160,160,60" alt="Circle Area" href="circlepage.html">
</map>
//In Javascript
const element = document.getElementById('mymap');
element .shape = "rect";
element .coords = "50,50,150,150";
//Or
//const rectCoords = "60,60,180,180";
element.setAttribute('coords', "60,60,180,180");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML shape attribute example</title>
</head>
<body>
<h3>HTML shape attribute example</h3>
<p>shape attribute is used to define the clickable area in a image map</p>
<div>
<img src="./resources/images/workplace2.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="https://w3context.com" coords="180,0,394,161"
shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="https://google.com" coords="69,8,63,10,59,14,56,21,53,
26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,
122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
<area target="_blank" alt="Note" title="Note" href="https://google.com" coords="3,111,138,85,170,247,30,276"
shape="poly">
</map>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.