The HTML shape attribute is used with the <area> tag to define the clickable area in a client-side image map.
Definition and Usage
➔ This works in conjunction with the coords attribute, which specifies the exact coordinates of the shape.
➔ The shape attribute can have the following possible values, each requiring a different format for the coords attribute:
- 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="image-source.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 id="sample" target="_blank" alt="Cup" title="Cup" href="https://www.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://www.msn.com" coords="3,111,138,85,170,247,30,276"
shape="poly">
</map>
//In JavaScript
// Using attribute name
const element = document.getElementById('sample');
element .shape = 'circle'; // Set the shape property
element .coords = '150, 100, 50'; // Set the coords property (x, y,radius)
// Or, using setAttribute()
element .setAttribute('shape', 'rect');
element .setAttribute('coords', '0,0,100,200');
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.