Menu
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/
931
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. The overlay makes a web-page attractive, and it is easy to design. Creating an overlay effect means to put two div together at the same place, but both will appear when required.
I think easiest way to show content inside a certain "area" is to make it a child-element of that area. You can use any block-element (e.g. <div></div>) as area. You will be be way more flexible this way as with using image maps.
Also showing contents when hovering can be achieved without any javascript with the :hover css pseudo class.
Below I positioned some boxes with css flex and hide/show the contents with css. You might want to position them in a css grid or some other way (like absolutely positioned in front of an image).
.container {
display: flex;
flex-wrap: wrap;
width: 30em;
}
.area {
cursor: pointer;
width: 15em;
height: 15em;
border: 2px solid black;
box-sizing: border-box;
}
.area > span {
opacity: 0;
}
.area:hover > span {
opacity: 1;
}
#area-red {
background-color: red;
}
#area-green {
background-color: green;
}
#area-blue {
background-color: blue;
}
#area-yellow {
background-color: yellow;
}<div class="container">
<div id="area-red" class="area">
<span>Red contents</span>
</div>
<div id="area-green" class="area">
<span>Green contents</span>
</div>
<div id="area-blue" class="area">
<span>Blue contents</span>
</div>
<div id="area-yellow" class="area">
<span>Yellow contents</span>
</div>
</div>You need to associate the image with the image map, so
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" >
Then set the position of the thing you want to move to be absolute:
<div class="card" style="width:40%; height: 10%; position:absolute;">
Then access the mouse pointer position in the event handler:
$('area').hover(function(e)
{
const card = document.querySelector('.card');
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseenter(function(e)
{
const card = document.querySelector('.card');
$(card).show();
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseleave(function(e)
{
const card = document.querySelector('.card');
$(card).hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
