Здравствуйте, многоуважаемые!
Есть скрипт подсветки области maphighlight.js. В общем-то все работает, но нужно как-то сделать, чтобы при наведении так же появлялся текст. К сожалению, изображение не в svg.
Как решить проблему?
Нужно сделать, наподобии этого:
https://premier-resort.com/
Ниже есть раздел: "Для перегляду планувань оберіть поверх".
Здесь при наведении показывается текст.
Сам js-скрипт jquery.maphilight.js
здесь
Заранее премного благодарен за любую помощь!
Мой код:
<script src="templates/shaper_resort/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="templates/shaper_resort/js/jquery.maphilight.js" type="text/javascript"></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>
