I have a static image made interactive using the concept of HTML maps.
Coordinates of the image set by uploading on https://imagemap.org/
Expected Behavior:
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.
Current Behavior:
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.
My code:
<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(){
????
})
Fiddle- https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
