有一个用于突出显示区域maphighlight.js的脚本。 一般来说,一切都有效,但我需要以某种方式这样做,以便当你悬停时,文本也会出现。 不幸的是,图像不在svg中。 帮忙,PLZ,解决问题! 非常感谢你提前! 我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://fs8.fex.net/get/044792275349/91630365/19cafc40/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function() {
$('.map').maphilight();
$('#squidheadlink').mouseover(function(e) {
$('#squidhead').mouseover();
}).mouseout(function(e) {
$('#squidhead').mouseout();
}).click(function(e) {
e.preventDefault();
});
});
</script>
<div>
<div class="map">
<canvas></canvas>
<img src="images/content/highlight/hotel_highlight2.png" width="1167px" height="580px" class="map maphilighted" usemap="#simple">
</div>
<map name="simple">
<area href="#" shape="poly" coords="216,145,196,178,435,65,642,144,658,111,457,24" alt="Этаж 6" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 6">
<area href="#" shape="poly" coords="195,195,194,227,437,134,628,196,637,161,438,87" alt="Этаж 5" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 5">
<area href="#" shape="poly" coords="196,244,196,280,437,203,609,249,624,215,436,159" alt="Этаж 4" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 4">
<area href="#" shape="poly" coords="196,295,195,331,437,273,598,304,609,266,437,228" alt="Этаж 3" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 3">
<area href="#" shape="poly" coords="195,345,195,366,438,322,588,345,595,322,435,294" alt="Этаж 2" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 2">
<area href="#" shape="poly" coords="235,403,234,449,446,438,686,450,686,396,449,375" alt="Этаж 1" data-maphilight="{"stroke":false, "fillColor":"6AA8FE","fillOpacity":0.6}" title="Этаж 1">
</map>
</div>
&#13;
jquery.maphilight.js here