HTML Image Map

With HTML image maps, you can create clickable areas on an image.

The HTML map tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more area tags.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>

To get the coordinates of the objects in the image you can visit the following websites:

• https://www.image-map.net/
• https://imagemap.org/

---

You can also visit my website where image map is used

reverent-yalow-4ee88e.netlify.app

And you can find the above website's code at https://github.com/harshilshah99/greenPaddle/blob/main/public/accessories.html