有没有办法将工具提示添加到（响应式）html 图像地图？

Question

我有一个自定义地图（一张图片），我需要在鼠标光标悬停在国家区域上时显示国家名称。

我正在使用 HTML 地图。我使用 HTML 地图的图像处于模式中，您可以通过单击按钮打开它。我已经尝试过 tooltipster (http://iamceege.github.io/tooltipster/) and Responsive HTML Image Maps jquery plugin (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 地图以外的东西？

Answer 1

您可以尝试使用这样的 javascript 插件：jquery.responsive-image-maps 动态重新计算 window.load 和 window.resize 上图像映射的坐标。然后一切都应该正常工作。

如果您愿意，也可以尝试响应式 svg 图像映射（它们更容易响应，但我不确定添加的工具提示）。

例如看这个create-responsive-svg-image-maps

这里是example of adding tooltipster tooltips to an svg map

Answer 2

您可以使用响应迅速且易于使用的 Taggd 脚本将自定义热点添加到您的地图。 https://timseverien.github.io/taggd/v3/

Answer 3

工作代码段 - 普通 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" />

有没有办法将工具提示添加到（响应式）html 图像地图？

Is there a way to add tooltips to a (responsive) html image map?

html

javascript

responsive