HTML Image map
Using image map user can click on a particular area in the image to open new link.
Any area can be created like rectangle, circle, polygon etc. for Image Map.
Use href attribute to create hyperlink for the image area.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example: HTML Image Map
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Map</title>
<meta charset="utf-8" />
</head>
<body>
<h3>Example: HTML Image Map</h3>
<div>
<img src="workplace2.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="#" coords="180,0,394,161" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="#" 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="#" coords="3,111,138,85,170,247,30,276" shape="poly">
</map>
</div>
</body>
</html>
Click on the "See output" button to see how it works.