Показать сообщение отдельно
  #3 (permalink)  
Старый 09.10.2014, 02:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

MiHALbI4,
так?
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <style type='text/css'>
   body{margin:0}
  .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_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:#01a0db;position:absolute}
  .region_01-info{left:0}
  .region_02-info{right:0}
  </style>
<script>
$(window).load(function() {
    $('.region_zone, .popup_zone_item').hide(0);
    var regionMap, blockInfo;
    $('#regions_map area').mouseenter(function(event) {
        regionMap = '.' + $(this).attr('id') + '-map';
        blockInfo = '.' + $(this).attr('id') + '-info';
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeIn(300);
    })
    $('#regions_map area').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
    $('.popup_zone_item').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('map_hack')) return;    
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
});
</script>
</head>
<body>
  <!--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-->

</body>
</html>

Последний раз редактировалось рони, 09.10.2014 в 02:40.
Ответить с цитированием