HTML 图像映射 - 设置特定区域的覆盖文本答案

【问题标题】：HTML Image Map - set area specific overlay textHTML 图像映射 - 设置特定区域的覆盖文本
【发布时间】：2020-08-29 04:11:26
【问题描述】：

我有一张图片地图。我设置了一个显示一些数据的覆盖文本。此数据设置为我要在卡片上显示的区域标记内的自定义属性的值，即应显示特定于相应区域的数据。

<body>
    <div class="interactive-map" >
        <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
        <div class="card" style="width:40%; height: 10%; position:absolute;">
          <div class="card-body" >
            
          </div>
        </div>
        <map name="image_map">
        <area title="Red" coords="25,33,68,65" shape="rect" data-definition="This is a Red Box">
        <area title="Green" coords="132,30,194,67" shape="rect" data-definition="This is a Green Box">
        <area title="Blue" coords="22,147,74,192" shape="rect" data-definition="This is a Blue Box">
        <area title="Yellow" coords="131,144,197,188" shape="rect" data-definition="This is a Yellow Box">
      </map>
      
      </div>
</body>

$('area').hover(function(e)
{
  const card = document.querySelector('.card');
  card.style.top = e.clientY+'px';
  card.style.left = e.clientX+'px';
  const def = $("area").attr('data-definition');
  $(".card-body").html(def);
 
});

area{
    cursor: pointer;
    
}

.card
{
  position:absolute;
}

小提琴 - https://jsfiddle.net/woke_mushroom/2u3kbnv9/27/

当我们将鼠标悬停在任何区域上时，特定于它的标题会作为工具提示出现。如果使用相同的逻辑我可以显示其他属性的属性，我可以实现这一点。

如何解决？

谢谢！

【问题讨论】：

而不是$("area").attr('data-definition') 使用$(this).attr('data-definition'); 以便它获得当前区域值，即悬停。
哦。伟大的！谢谢 :D 成功了。
请注意，只有一个函数参数悬停，该函数在进入和离开时都会被调用。离开你可能想要另一个功能

标签： html jquery

【解决方案1】：

$('area').hover(function(e) {
   const card = document.querySelector('.card');
   card.style.top = e.clientY+'px';
   card.style.left = e.clientX+'px';
   const def = $(this).data('definition');
   $(".card-body").html(def);
});

可以解决问题，尽管我认为您的地图坐标可能需要根据您的小提琴进行一些调整。

【讨论】：