I have an image map. I want to show an image when hover an area in image map. but is it possible? i mean even I show the image on hover, I want that the image map keep working as I click it and direct to another page.
here's the example of image map: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
you could add something like this:
<style>
area[alt=Computer]:hover::after {
content:'';
background-image: url('https://placeimg.com/1600/1275/people');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 200px;
height: 175px;
}
</style>
that will show an image right underneath the image you are hovering. you could then do the same for the other areas
if you want the image to show over the original image you could try adding
position: absolute;
but then you would have to make sure there is a parent element with
position: relative;
for it to be positioned against. like this for example:
<style>
.container {
position: relative;
}
area[alt=Computer]:hover::after {
content:'';
background-image: url('https://placeimg.com/200/175/people');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 200px;
height: 175px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<div class="container">
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</div>