Hello guys today i am going to show you how to make the image mapping with area coordinates attribute in rectangle shape.

How  does <area coords=""> HTML Attribute works?

The coords attribute specifies the size of the clickable area.  In all cases, the (x, y) coordinates use the top-left corner and bottom right corner as the origin (0, 0).

Coordinates for Rectangles

In rectangle, the coordinates define the top-left and bottom-right of the rectangle. There are four numeric values, separated by commas. The first two values are the (x, y) coordinates of the top left corner. The third and fourth numbers are the (x, y) coordinates of the bottom right corner.
Please refer my below image.

We have mapped the 5 area with red frame. Please refer my below screenshot and code.

<img id="Image-Maps-Com-image-maps-2016-05-11-044713"  src="kitchen-clipart-14.png" border="0" width="2400" height="1008   usemap="#image-maps-2016-05-11-044713"  alt="" />

<map name="image-maps-2016-05-11-044713"   id="ImageMapsCom-image-maps-2016-05-11-044713">

<area id="cupboard1"  alt="cupboard1"  title="cupboard1" href="cupboard1" shape="rect" coords="67,51,455,356" style="outline:none;" target="_self"    data-maphilight='cupboard1' />

<area id="flowerport"  alt="flowerport"  title="flowerport" href="flowerport" shape="rect" coords="1700,215,1940,302" style="outline:none;" target="_self"   data-maphilight='flowerport' />

<area id="kit" alt="kit" title="kit" href="kit" shape="rect" coords="2149,416,2338,560" style="outline:none;" target="_self"  data-maphilight='kit' />

<area id="stuve" alt="stuve" title="stuve" href="stuve" shape="rect" coords="784,559,1098,634" style="outline:none;" target="_self"  data-maphilight='stuve' />

<area id="knives" alt="knives" title="knives" href="knives" shape="rect" coords="351,370,418,551" style="outline:none;" target="_self"  data-maphilight='knives' />

</map>

Thank you and Keep growing!! 🙂