JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="holder" style="width:100%; height:100%; position:relative;">
    <img src="http://s11.postimg.org/4v34hotmb/amenities.jpg" class="img-responsive" usemap="#photomap" />
    <map name="photomap">
        <area shape="circle" id="swimmingpool" coords="89,194,89" href="#" alt="swimmingpool">
        <area shape="circle" id="parkview" coords="308,321,89" href="#" alt="parkview">
        <area shape="circle" id="tenniscourt" coords="145,445,89" href="#" alt="tenniscourt">
    </map>
    <div class="swimmingpool hidethis"></div>
    <div class="parkview hidethis"></div>
    <div class="tenniscourt hidethis"></div>
</div>

CSS

.swimmingpool {
    border:1px solid #F00;
    background-image: url("http://s1.postimg.org/rdyk5ko5r/park.jpg");
    position: absolute;
    height: 202px;
    width: 204px;
    left: 0px;
    top: 105px;
}
.parkview {
    border:1px solid #F00;
    background-image: url("http://s1.postimg.org/rdyk5ko5r/park.jpg");
    position: absolute;
    height: 202px;
    width: 204px;
    left: 219px;
    top: 232px;
}
.tenniscourt {
    border:1px solid #F00;
    background-image: url("http://s1.postimg.org/rdyk5ko5r/park.jpg");
    position: absolute;
    height: 202px;
    width: 204px;
    left: 56px;
    top: 356px;
}
.hidethis{
    display:none;
}

JavaScript

$('#holder').on('mouseenter','area[shape=circle]',function(){      
    $('.' + $(this).attr('id')).fadeIn('slow');
});

$('#holder').on('mouseleave','.hidethis',function(){
    $('.hidethis').fadeOut('slow');
});