HTML Image Maps

An image map turns regions of one image into separate links.

Add a usemap attribute to the <img>, then define the clickable regions with a <map> and one <area> per region.

An image map

<!DOCTYPE html>
<html>
<body>

<img src="shapes.png" alt="Shapes" usemap="#shapes" width="200" height="200">
<map name="shapes">
  <area shape="circle" coords="75,75,40" href="/circle">
  <area shape="rect" coords="130,10,190,60" href="/square">
</map>

</body>
</html>