|
Сообщение от рони
|
bes,
в каком это браузере ?
|
хром, опера, ff
проблема осталась всего в одном моменте и лечится примерно так
<!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;
*!*if ($(event.relatedTarget).hasClass('area')) return; */!*
$(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
});
});
</script>
</head>
<body>
<!--block-->
<div class="main_block">
<map name="regions_map" id="regions_map">
<area class="area" id="region_01" shape="rect" coords="32,48,217,153" alt="">
<area class="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>