Есть ли способ добавить всплывающие подсказки в (отзывчивый) HTML-карту изображения? - PullRequest
Новая
       0

Есть ли способ добавить всплывающие подсказки в (отзывчивый) HTML-карту изображения?

0 голосов
/ 22 января 2019

У меня есть пользовательская карта (изображение), и мне нужно показывать названия стран, когда курсор мыши находится над областями стран.

Я использую карту HTML. Мое изображение, использующее HTML-карту, находится в модальном режиме, который можно открыть, нажав кнопку. я пробовал всплывающую подсказку (http://iamceege.github.io/tooltipster/) и jquery плагин Responsive HTML Image Maps (https://github.com/davidjbradshaw/image-map-resizer),), но не могу отобразить всплывающие подсказки именно там, где я хочу, и это может быть связано с проблемами отзывчивости изображения принимает высоту модального поля, в то время как размер изображения больше этого, и я создал карту на основе реального размера изображения.

Вот мой код карты: 

 <img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
                    <map name="map" id="locations-map">
                           <area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
                    </map>

Итак, мой вопрос: это правильный способ сделать это? я на правильном пути или я должен использовать что-то, кроме карт HTML?

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Вы можете добавить собственную точку доступа к вашей карте, используя скрипт Taggd, который отзывчив и прост в использовании. https://timseverien.github.io/taggd/v3/

0 голосов
/ 22 января 2019

Рабочий фрагмент - ванильный JS

Хотя этот подход не идеален, он работает:

Примечание: Я изменил первую карту изображенияпоявляться в центре 

function myFunc (el) {

  var tooltip = document.getElementById('myTooltip');
  tooltip.style.display = 'block';
  tooltip.innerHTML = el.title;
}

function myFuncHide(el) {
  var tooltip = document.getElementById('myTooltip');
  tooltip.style.display = 'none';
  tooltip.innerHTML = '';
}

document.addEventListener('mousemove', function(e){
    /*console.log(e.pageX);
    console.log(e.pageY);*/
    document.getElementById('myTooltip').style.left = (e.pageX+5)+"px";
      document.getElementById('myTooltip').style.top = (e.pageY+5)+"px";
 
});
#myTooltip {
  display: inline-block;
  padding: 15px;
  background: rgba(0,0,0,.5);
  color: white;
  position: absolute;
  display: none;
}
 <img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" class="locations-map-full" width="600" height="600" alt="" usemap="#map">
                    <map name="map" id="locations-map">
                           <area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="300, 300, 100" title="Tunisie" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="circle" coords="457, 374, 7" title="Algerie" onmouseover="myFunc(this)" class="tooltip" />
<area shape="circle" onmouseover="myFunc(this)" coords="406, 360, 16" alt="Maroc" class="tooltip" />
                    </map>
                    
                    
<div id="myTooltip" />
0 голосов
/ 22 января 2019

Вы можете попробовать использовать плагин javascript следующим образом: jquery.responsive-image-maps , который динамически пересчитывает координаты карты изображения на window.load и window.resize. Тогда все должно работать нормально.

Если хотите, вы можете попробовать адаптивные карты изображений svg (их легче сделать адаптивными, но я не уверен насчет добавления подсказок).

Например, посмотрите это create-responseive-svg-image-maps

Вот пример добавления всплывающих подсказок к карте svg

...