JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<div>
    <img src="http://s3.amazonaws.com/rapgenius/cats-animals-kittens-background.jpg" 
       usemap="#Map" 
       id='imagem'
       class="fixed-background" 
       />

  <map name="Map" id="Map">
    <area href="#" onClick="alert('Olho esquerdo');" 
          shape="poly" coords="339,207,311,221,319,247,352,258,374,247,380,214,362,207" />
    <area href="#" onClick="alert('Olho direito');" 
          shape="poly" coords="369,305,327,320,325,350,338,382,357,383,384,369,395,343,389,314" />
  </map>
</div>

CSS

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

JavaScript

$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('shape') + ' clicked');
	});
});