How to create HTML Image Map Shape="poly" - HTML Image Maps

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

Output should be:

We have to find the x and y coordinates for all edges of the croissant:

Output should be:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>

<img src="https://www.w3schools.com/html/frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">

<map name="foodmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

Output should be:

This is the area that becomes clickable and will send the user to the page "croissant.htm":

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Image Maps
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference