Question

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

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

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

如何解决这个问题？

谢谢！

Answer 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);
});

可以做到这一点，尽管我认为您的地图坐标可能需要根据您的小提琴进行一些调整。

HTML图像地图-设置区域特定的覆盖文字

1 个答案: