JSFiddle - React, Tailwind, and code Playground

by hescano

HTML

<div id="mainDiv" style="position: relative">
  <img src="https://i.imgur.com/Dz5jnTw.pngf" usemap="#samplemap">
</div>

<map name="samplemap" id="samplemap">
  <area alt="" title="" href="#" shape="rect" coords="30,36,69,77" />
  <area alt="" title="" href="#" shape="rect" coords="98,33,143,53" />
  <area alt="" title="" href="#" shape="rect" coords="98,59,143,77" />
  <area alt="" title="" href="#" shape="rect" coords="99,86,142,103" />
  <area alt="" title="" href="#" shape="rect" coords="97,110,143,129" />
  <area alt="" title="" href="#" shape="rect" coords="99,135,144,153" />
  <area alt="" title="" href="#" shape="rect" coords="96,162,143,179" />
  <area alt="" title="" href="#" shape="rect" coords="97,186,144,204" />
  <area alt="" title="" href="#" shape="rect" coords="97,212,143,230" />
  <area alt="" title="" href="#" shape="rect" coords="170,157,209,182" />
</map>

CSS

.circle {
  border-radius:50%;
}

JavaScript

$(function() {
var coords, left, top, right, bottom, w, h;
	$("#samplemap area").each(function() {
  	coords = $(this).prop("coords").split(",");
    if ($(this).prop("shape") === "rect") {
    	//x1,y1,x2,y2
      left = coords[0];
      top = coords[1];
      right = coords[2];
      bottom = coords[3];
      w = right - left;
      h = bottom - top;
    $("#mainDiv").append($('<div></div>').css({position: 'absolute', left: left + "px", top: top + "px", border: 'solid 1px green'}).width(w).height(h));
    }
  })
});