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.
HTML Image Map Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Map Example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML Image Map Example</h3>
<div>
<img src="myimage.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.