Показать сообщение отдельно
  #1 (permalink)  
Старый 15.07.2018, 15:58
Аватар для romang
Новичок на форуме
Отправить личное сообщение для romang Посмотреть профиль Найти все сообщения от romang
 
Регистрация: 16.05.2016
Сообщений: 7

Всплывающее окно на JQuery на карте
Всем доброго времени суток. Есть вот такая карта http://test.pip-mollusca.org/planograma2/ при наведение на выделенные белым участики показываеться всплывающее окно. Проблема в том, что если убрать курсор с участка окно скрывается и нет возможности нажать кнопку "Подробнее".
Подскажите пожалуйста как можно решить эту проблему.
Спасибо

Окно показываться с помощью вот этого кода

<script>
    $('.part').hover (
      function() {
        $('.description').html($(this).attr('description-data'));
        $('.description').fadeIn(50);
      },
      function() {
        $('.description').fadeOut();
      }
    )
      </script>


ну и код карты

<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>
Ответить с цитированием