JSFiddle - React, Tailwind, and code Playground

HTML

<div container="container" width="1439" height="1079">
  <img src="https://imgur.com/sBmdo9z.png" alt="map" usemap="#hakurei-map" width="1439" height="1079" id="img" class="map">
<script type="text/javascript">
  $(function() {
    $('.map').maphilight();
  });
</script>
  <map name="hakurei-map">
    <area shape="poly" coords="" tabindex="0" href="https://bannedofseven.tumblr.com/mthakurei onmouseover="area" class="map">
    <area shape="poly" coords="507,859,499,995,595,1018,785,1011,1194,978,1167,798,897,797,518,817," tabindex="0" href="https://bannedofseven.tumblr.com/village-bo7" onmouseover="area" class="map">
    <area shape="poly" coords="356,1027,502,1020,496,804,356,805" tabindex="0" href="https://bannedofseven.tumblr.com/bo7grave" onmouseover="area" class="map">


      </map>
      </div>

      <p id="coords"></p>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

CSS

area {
  outline-color: white;
}
$.fn.maphilight.defaults = {
	fill: true,
	fillColor: '000000',
	fillOpacity: 3,
	stroke: true,
	strokeColor: '000000',
	strokeOpacity: 1,
	strokeWidth: 1,
	fade: true,
	alwaysOn: false,
	neverOn: false,
	groupBy: false,
	wrapClass: true,
	shadow: false,
	shadowX: 0,
	shadowY: 0,
	shadowRadius: 6,
	shadowColor: '000000',
	shadowOpacity: 0,
	shadowPosition: 'outside',
	shadowFrom: false
}

JavaScript

var img = document.getElementById('img');
var coords = document.getElementById('coords');
img.addEventListener('mousemove', function(event){

  coords.innerHTML = "x: " + event.offsetX + "<br/>y: " + event.offsetY;
});


$(function() {
    $('.maparea').maphilight();
});