0

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>
Improve this question
2
  • 3
    I believe it's possible but the question is, what have you tried? also where do you want the image to be shown when you hover?
    – Carsten Løvbo Andersen
    Commented Sep 23, 2021 at 8:28
  • for example when i hover the computer, i want to show an image (ex: <img src="images.unsplash.com/…" width="200" class="hover-img" />)
    – Khairunnisa Syahfitri
    Commented Sep 23, 2021 at 8:36

1 Answer 1

Reset to default
2

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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.