JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />
<div id="overlayr1">&nbsp;</div>
<div id="overlayr2">&nbsp;</div>
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />
<map name="location-map" id="location-map">
  <area shape="rect" coords="0,0,300,160" href="#" id="r1" />
  <area shape="rect" coords="0,161,300,350" href="#" id="r2"/>
</map>

CSS

body,html {
    margin:0;
}
#emptygif {
    position:absolute;
    z-index:200;
}
#overlayr1 {
    position:absolute;
    background:#fff;
    opacity:0.2;
    width:300px;
    height:160px;
    z-index:100;
    display:none;
}
#overlayr2 {
    position:absolute;
    background:#fff;
    opacity:0.2;
    width:300px;
    height:160px;
    top:160px;
    z-index:100;
    display:none;
}

JavaScript

$(document).ready(function() {
        if($('#location-map')) {
            $('#location-map area').each(function() {
                var id = $(this).attr('id');
                $(this).mouseover(function() {
                    $('#overlay'+id).show();
                    
                });
                
                $(this).mouseout(function() {
                    var id = $(this).attr('id');
                    $('#overlay'+id).hide();
                });
            
            });
        }
    });