The HTML usemap attribute is used to define an image as an image map.
Definition and Usage
➔ This allows the user to click on a single or multiple clickable areas within an image.
➔ The usemap attribute is used on the <img> element and the usemap attribute value is the id or name of the <map> element followed by a # symbol (i.e. <img usemap="#map_name">).
➔ <area> elements are used within a <map> element to define single or multiple clickable areas on an image.
Syntax
//In HTML
<div>
<img src=".workplace2.png" usemap="#mapid" id="imgid">
<map id="mapid">
<area target="_blank" alt="Laptop" title="Laptop" href="#" coords="" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="#" coords="" shape="poly">
<area target="_blank" alt="Note" title="Note" href="#" coords="" shape="poly">
</map>
</div>
//In Javascript
let imgelement = document.querySelector("#imgid");
let map_name_or_id ="#"+"mapid";
imgelement.useMap = map_name_or_id;
//imgelement.setAttribute('useMap', map_name_or_id);
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML usemap attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML usemap attribute example</h3>
<p>usemap attribute is used to create image map to define single or multiple clickable areas within a image.</p>
<div>
<img src="./resources/images/workplace2.png" usemap="#mapid" id="imgid">
<map id="mapid">
<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://msn.com" coords="3,111,138,85,170,247,30,276"
shape="poly">
</map>
</div>
<script>
//let imgelement = document.querySelector("#imgid");
//let map_name_or_id ="#"+"mapid";
//imgelement.useMap = map_name_or_id;
//imgelement.setAttribute('useMap', map_name_or_id);
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.