Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Всплывающее окно на JQuery на карте
 
 автор: bibika   (15.07.2018 в 16:02)   письмо автору
 
 

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

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

1
2
3
4
5
6
7
8
9
10
11
<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>

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования