I have a static image made interactive using the concept of HTML maps.
Coordinates of the image set by uploading on /
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 e in the red box itself, if it hovers on green then in green and so on.
Current Behavior:
The overlay text position is not ing 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=".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- /
I have a static image made interactive using the concept of HTML maps.
Coordinates of the image set by uploading on https://imagemap/
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 e in the red box itself, if it hovers on green then in green and so on.
Current Behavior:
The overlay text position is not ing 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./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/woke_mushroom/2u3kbnv9/14/
Share Improve this question edited Aug 27, 2020 at 14:08 Itika Bandta asked Aug 27, 2020 at 13:30 Itika BandtaItika Bandta 1631 gold badge3 silver badges12 bronze badges 04 Answers
Reset to default 3I 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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors./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>
$(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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img usemap="#image_map" src="https://www.politicalmetaphors./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>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)
As you are specifying coords attribute to your area, you can specify cards left and top property
let pos = e.target.coords.split(",");
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
Initially set it's style to display none, then on some event calculate its actual position and set its left and top. Add padding left and top to show text exactly in center.
$('area').on("click", function(e) {
let pos = e.target.coords.split(",");
const card = document.querySelector('.card');
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
});.card {
position: absolute;
}
area {
cursor: pointer;
} <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map">
<img src="https://www.politicalmetaphors./wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
<div class="card" style="width:40%; height: 10%; display: none;">
<div class="card-body" style="width: 20%;">
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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.0/js/bootstrap.min.js"></script>