JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://i.stack.imgur.com/wXXbT.png" alt="" usemap="#Map" />
  <map name="Map" id="Map">
      <area class="a1" alt="" title="" href="#" shape="poly" coords="92,294,13,293,8,287,13,98,89,98" />
      <area class="a2" alt="" title="" href="#" shape="poly" coords="93,294,455,293,463,285,460,171,481,151,484,142,456,168,453,146,459,131,459,72,389,73,388,10,92,8,88,96" />
  </map>

JavaScript

$(function myFunc() {

	var img = $("img"),
			imgSRC = img.attr('src');
  
	$('#Map').on("mouseleave", function() {
  
  	img.attr('src', imgSRC );
  
  }).find("area").on("mouseenter", function() {

    if ( $(this).hasClass('a1') ) {
      img.attr('src', 'http://i.stack.imgur.com/GMdxj.png' );
    } 
    else if ( $(this).hasClass('a2') ) {
      img.attr('src', 'http://i.stack.imgur.com/qZLTo.png' );
    }

  });


});