JSFiddle - React, Tailwind, and code Playground
HTML
<!--block-->
<div class="main_block">
<map name="regions_map" id="regions_map">
<area id="region_01" shape="rect" coords="32,48,217,153" alt="">
<area id="region_02" shape="rect" coords="284,48,469,154" alt="">
</map>
<img class="regions_map" src="http://s9.postimg.org/e3v5g34v3/main.png" width="500" height="200" alt="">
<img class="region_zone region_01-map" src="http://s15.postimg.org/e2m4p68ln/left_hover.png" width="500" height="200" alt="">
<img class="region_zone region_02-map" src="http://s29.postimg.org/quxquu5yv/right_hover.png" width="500" height="200" alt="">
<img class="map_hack" src="http://s29.postimg.org/ep3y6p1v7/fix.png" width="500" height="200" usemap="#regions_map" alt="">
</div>
<!--END block-->
<!--popup-->
<div class="popup_block">
<div class="popup_zone_item region_01-info"></div>
<div class="popup_zone_item region_02-info"></div>
</div>
<!--END popup-->
CSS
body
{
margin: 0;
}
/* block */
.main_block
{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 200px;
font-size: 0;
line-height: 0;
position: absolute;
}
.main img
{
border: none;
}
.regions_map,
.region_zone
{
top: 0px;
left: 0px;
position: absolute;
}
.map_hack
{
position: relative;
}
/* popup */
.popup_block
{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 0;
position: absolute;
}
.popup_zone_item
{
top: 0;
width: 90px;
height: 100px;
background-color: #01a0db;
position: absolute;
}
.region_01-info
{
left: 0;
}
.region_02-info
{
right: 0;
}
JavaScript
$('.region_zone, .popup_zone_item').hide(0);
$('#regions_map area').hover(function() {
var regionMap = '.'+$(this).attr('id')+'-map';
var blockInfo = '.' + $(this).attr('id') + '-info';
$(regionMap+','+blockInfo).stop(true, true).fadeIn(300);
}, function() {
var regionMap = '.'+$(this).attr('id')+'-map';
var blockInfo = '.' + $(this).attr('id') + '-info';
$(regionMap+','+blockInfo).stop(true, true).fadeOut(400);
});