Как я могу изменить часть изображения при наведении, если это многоугольник? - PullRequest
Новая
       32

Как я могу изменить часть изображения при наведении, если это многоугольник?

0 голосов
/ 09 июля 2019

У меня есть изображение (png), которое отображает 3 раздела, которые являются ссылками на 3 разные страницы.Это должно работать следующим образом: при наведении курсора на часть изображения (соответствующую определенному разделу), которая является многоугольником, изображение должно измениться, но только на определенную его часть.В основном есть несколько домов, тип которых зависит от конкретного раздела, а дома, принадлежащие этому разделу, меняют цвет при наведении.

Я использую html карту и тег площади и jQuery, чтобы показать div с фоновым изображением, когдаЯ парю над разделом.Это работает, но продолжает мерцать.Как я могу предотвратить мерцание?(координаты еще не верны, это действительно многоугольник :)) 

<div style="position: relative;" class="map-container">
  <img src="{image}" usemap="#main-map" class="map-empty">
  <map name="main-map">
   <area shape="poly" coords="0,0,550,0,550,198,0,198" href="#sprava" id="sprava" style="z-index: 2;" />
  <area shape="poly" coords="150,0,250,0,250,100,150,100" href="#firmy" id="firmy" />
  <area shape="poly" coords="80,100,200,100,200,150,80,150" href="#domy" id="domy" />
</map>
<div class="spravaimg">
  </div>
</div>

jQuery( document ).ready(function() {

  jQuery('#sprava').mouseenter(function() {
      jQuery('.spravaimg').show();
    });
    jQuery('#sprava').mouseleave(function() {
      jQuery('.spravaimg').hide();
    });

});

.spravaimg { 
position: absolute; 
top: 3px; 
left: 0; 
width: 545px; 
height: 300px; 
background-image: url('{image}'); 
display: none; 
z-index: 1;  
}
...