CODEWITHSUNDEEP
javascripthtmljquerycssimagemap
Khairunnisa Syahfitri
Khairunnisa Syahfitri

Reputation: 107

How to show image on hover in image map

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>

Upvotes: 0

Views: 1458

Answers (1)

thehuijb
thehuijb

Reputation: 239

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>

Upvotes: 2

Related Questions