|
Сообщение от romang
|
|
за исключением медленного скрытия предыдущих окон
|
другой вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #228B22;
}
.map{
height: 500px;width: 500px;
}
.part:hover{
fill : #EEE8AA;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$(".part").tooltip({
items: ".part",
content: function(a) {
return $(this).attr("description-data")
},
show: {
delay: 200
},
close: function(event, ui) {
ui.tooltip.hover(
function() {
$(this).stop(true).fadeIn(100);
},
function() {
$(this).fadeOut(400, function() {
$(this).remove();
});
}
)
}
});
});
</script>
</head>
<body>
<div style="position: relative;">
<img class="map" src="img/genplan_m.jpg" usemap="#image-map">
<svg id="map" style="position: absolute; top: 0;left: 0;height: 100%;width: 100%;" viewBox="0 0 1056 527.03998">
<a href="#">
<path class="part" d="m 745.8,497.81141 12.25714,-16.97143 32.05715,26.4 -15.08572,9.42857 z" fill="white" opacity=".8" description-data="
<img src='img/gg.png' alt=''>
<span class='opys'>Номер участка: <b>675</b></span>
<span class='opys'>Площадь общая, соток: <b>23.16</b> </span>
<br><br>
<a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
"></a>
<a href="#">
<path class="part" d="m 754.03847,481.70433 12.66731,-16.00081 32.00163,25.33462 -11.33391,14.66742 z" fill="white" opacity=".8" description-data="
<img src='img/gg2.png' alt=''>
<span class='opys'>Номер участка: <b>676</b></span>
<span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
<br><br>
<a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
"></a>
<a href="#">
<path class="part" d="m 766.70578,465.03681 10.33386,-14.33406 33.33504,25.00128 -10.66721,14.66741 z" fill="white" opacity=".8" description-data="
<img src='img/gg2.png' alt=''>
<span class='opys'>Номер участка: <b>677</b></span>
<span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
<br><br>
<a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
"></a>
</svg>
<div class="description"></div>
</div>
</body>
</html>