Question

我有一个自定义地图（图像），并且当鼠标指针位于国家/地区上时，我需要显示国家/地区名称。

我正在使用HTML映射。我使用HTML映射的图像处于可通过单击按钮打开的模式。我已经尝试使用工具提示（http://iamceege.github.io/tooltipster/）和响应式HTML Image Maps jquery插件（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

有效代码段-香草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" />

Answer 2

您可以尝试使用如下所示的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 3

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

有没有一种方法可以向（响应的）html图像映射添加工具提示？

3 个答案: