Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2018, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

tooltip delay jQuery подсказка с задержкой
romang,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      background-color: #228B22;
  }
  .map{
     height: 500px;width: 500px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(window).on("load", function() {
   $( ".part" ).attr("title","").tooltip({
   content:  function(a) {
   a($(this).attr("description-data"))
},
   hide: {  delay: 1700 }


});
});
  </script>
</head>

<body>
<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>

</body>
</html>

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

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

Какая-то странная ситуация. Приведенный пример у меня на локалке и на сервере ведет себя странно. То не прогружает окна, или прогружает с большой задержкой. А в приведенном примере работает отлично, за исключением медленного скрытия предыдущих окон
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2018, 09:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

romang,
попробуйте без load
$(function() {
$( ".part" ).attr("title","").tooltip({
   content:  function(a) {
   a($(this).attr("description-data"))
},
   hide: {  delay: 1700 }
});
});
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2018, 21:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

tooltip hover jQuery подсказка с задержкой
Сообщение от romang
за исключением медленного скрытия предыдущих окон
другой вариант ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      background-color: #228B22;
  }
  .map{
     height: 500px;width: 500px;
  }
  .part:hover{
      fill : #EEE8AA;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
  $(function() {
      $(".part").tooltip({
          items: ".part",
          content: function(a) {
              return $(this).attr("description-data")
          },
          show: {
              delay: 200
          },
          close: function(event, ui) {
              ui.tooltip.hover(
                  function() {
                      $(this).stop(true).fadeIn(100);
                  },
                  function() {
                      $(this).fadeOut(400, function() {
                          $(this).remove();
                      });
                  }
              )
          }
      });
  });
  </script>
</head>

<body>
<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>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающее окно, нужна подсказка! Женяба Элементы интерфейса 4 26.01.2018 21:05
Расширенное всплывающее окно popup sayaton Элементы интерфейса 10 30.05.2017 17:43
Оригинальное всплывающее окно Yurec Events/DOM/Window 3 17.03.2014 14:38
Модальное окно JQuery UI из фрейма schtromm jQuery 3 11.02.2014 13:55
Всплывающее окно в браузере Maxsl_89 Элементы интерфейса 0 25.10.2013 09:21