在HTML地图的特定位置添加叠加层 [英] add overlay in specific position in HTML map
问题描述
我有一个静态图像，使用HTML映射的概念进行了交互。
I have a static image made interactive using the concept of HTML maps.
预期的行为：
应该将鼠标悬停在其相应框中显示一个叠加层。例如，当鼠标悬停在红色框上时，重叠文本应位于红色框本身中，如果它悬停在绿色上，然后悬停在绿色上，依此类推。
An overlay should display on hover in its respective box. For example, when the mouse hovers over red box, the overlay text should come in the red box itself, if it hovers on green then in green and so on.
当前行为：
覆盖文本的位置不在其相应的框中。它显示在底部。为此，我正在考虑在单击相应区域标签之后添加包含文本的div。
The overlay text position is not coming in its respective box. It is displayed at the bottom. To achieve this, I am thinking of appending the div that contains the text right after the respective area tag when it is clicked.
我的代码：
<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(){
????
})
小提琴- https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/
推荐答案
$(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中。它还根据区域标签自动计算覆盖图的位置和大小。
（注意：我已根据您的要求更改了区域坐标，每种颜色都应视为自己的盒子）
This code will place the overlay nicely in one position and will avoid flicker by using "pointer-events: none" in the css. It also auto-calculate the position and size of the overlay based on the area tags. (Note: I have altered the area coordinates based upon your requirement that each color be considered its own box)
这篇关于在HTML地图的特定位置添加叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
