在 HTML 地图中的特定位置添加叠加层
Iti*_*dta 5 html javascript css jquery
我有一个静态图像使用 HTML 地图的概念进行交互。
通过在https://imagemap.org/上传设置的图像坐标
预期行为：
悬停时应在其各自的框中显示叠加层。例如，当鼠标悬停在红色框上时，覆盖文本应该出现在红色框本身中，如果悬停在绿色上，则为绿色，依此类推。
当前行为：
覆盖文本位置不在其各自的框中。它显示在底部。为了实现这一点，我正在考虑在单击时在相应的区域标签之后附加包含文本的 div。
我的代码：
<body>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card" style="width:40%; height: 10%;">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
</body>
area{
cursor: pointer;
}
$('area').hover(function(){
????
})
$(function() {
$('area').mouseenter(function() {
let coords = this.coords.split(',').map(a => a.trim())
$('.card').css({display: 'block', top: coords[1] + 'px', left: coords[0] + 'px', width: coords[2] - coords[0], height: coords[3] - coords[1]})
});
$('area').mouseleave(function() {
$('.card').css({display: 'none'})
});
});.interactive-map {
position: relative;
}
.card {
display: none;
position: absolute;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area title="Red" coords="0,0,150,150" shape="rect">
<area title="Green" coords="150,0,300,150" shape="rect">
<area title="Blue" coords="0,150,150,300" shape="rect">
<area title="Yellow" coords="150,150,300,300" shape="rect">
</map>
</div>此代码将覆盖层很好地放置在一个位置，并通过在 css 中使用“pointer-events: none”来避免闪烁。它还根据区域标签自动计算叠加的位置和大小。（注意：我根据您的要求更改了区域坐标，即每种颜色都被视为自己的盒子）