<!--HTML-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#p168 .post-author {
display:none;
}
#p168 .post-body {
margin-left: 0 !important;
}
.map_wrapper {
position:relative;
margin-left: -34px;


transform: scale(0.90);
}
    #make_bck_dark {
            width:900px;
            height:500px;
            z-index: 200;
            background: white;
        position: absolute;
            opacity:0.7;
            display:none;
    
    }
    @import "http://fonts.fontstorage.com/import/bebasneue.css";
    .dis_map {
 background:url(https://forumstatic.ru/files/0018/26/71/93987.png);
        width:900px;
        height:500px;
       
        position:relative;
    }
    .dis_map_click {
        width:116px;
        position: absolute;
        height:25px;
        cursor:pointer;
    }
    .dis_map_click:hover {
        background: white;
        opacity:0.5;
    }
    #map_beverly {
        top:108px;
        left:231px;
    }
    #map_santamon {
          top:225px;
        left:176px;
    }
    #map_playav {
        top:369px;
        left:290px;
    }
    #map_los_ang {
        top:209px;
        width:122px !important;
        left:410px;
    }
    #map_hidep {
        top:410px;
        left:481px;
    }
    #map_holly {
        top:46px;
        left:415px;
    }
    #map_china {
        top:324px;
        left:673px;
    }
    #map_downt{
        top:147px;
        left:678px;
    }
    .map_info {
        position: absolute;
        top:147px;
        left:292px;
        width:340px;
        height:215px;
        background:black;
        color:white;
        font-family: sans-serif;
        z-index:300;
        padding:5px;
        font-size:10px;
        overflow-y:auto;
        text-align: justify;
    }
</style>

<script>
$(document).ready(function(){
    $(".map_hide").hide();
         $( ".dis_map_click").click(function() {
            var id = $(this).attr('id');
          $("#"+id+"_show").fadeIn(500);
         $("#make_bck_dark").show();
        });
    $( "#make_bck_dark").click(function() {
        $("#make_bck_dark").fadeOut(500);  
        $(".map_info").hide();
        });
        
});

</script>
<div class="map_wrapper">
<div class="dis_map">
    <div id="make_bck_dark"></div>
<div class="dis_map_click" id="map_beverly"></div>
    <div class="dis_map_click" id="map_santamon"></div>
    <div class="dis_map_click" id="map_playav"></div>
    <div class="dis_map_click" id="map_los_ang"></div>
    <div class="dis_map_click" id="map_hidep"></div>
    <div class="dis_map_click" id="map_holly"></div>
    <div class="dis_map_click" id="map_china"></div>
    <div class="dis_map_click" id="map_downt"></div>
    <div id="map_beverly_show" class="map_hide map_info"> </div>
    
<div id="map_santamon_show" class="map_hide map_info">/div>
<div id="map_playav_show" class="map_hide map_info"></div>
<div id="map_los_ang_show" class="map_hide map_info"></div>
<div id="map_hidep_show" class="map_hide map_info"></div>
<div id="map_holly_show" class="map_hide map_info"></div>
<div id="map_china_show" class="map_hide map_info"></div>
<div id="map_downt_show" class="map_hide map_info"></div>
</div>
</div>