How to display a new picture when my mouse move to a certain area of the picture?

Question

everyone. I want to display a new picture under my original picture when my mouse moves to the specific area of the original picture. and I'm new to HTML and CSS, so I still can not find a way to fix it. I have tried some codes, but I can't combine and together. The original picture is "Cata_all" the image should display below it, is "catabottoff"

<body>        
    <map src="graph/Cata_all.jpg" name="productmap">
        <area shape="rect" coords="5,205,150,250" href="catabottoff.jpg" target="">    
    </map>
    <img src="graph/Cata_all.jpg" usemap="#productmap">     
</body>

Another code I also tried is onmouseover:

<table border=0 height="50%" width="50%">
        <tr valign="top">
            <td width="20%">
                <img onmouseout="this.src='graph/Cata_all.jpg'" onmouseover="this.src='graph/catabottoff.jpg'" src="graph/Cata_all.jpg"/>
                <map src="graph/Cata_all.jpg" name="productmap">
                <area shape="rect" coords="5,205,150,250" href="" >

I'm really appreciate if you can give me some hints. Thank you so much~

Does this answer your question? [Change the mouse pointer using JavaScript](https://stackoverflow.com/questions/4564251/change-the-mouse-pointer-using-javascript) — Allan Wind, Apr 04 '21 at 13:01

Rehan H · Accepted Answer · 2021-04-04T15:53:18.710

While there are some parts unclear about your requirements but I think this basic example should give you a way to create what you're after.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

With a little javascript, you can build something like this

There also a Javascript way of doing this but I'm not sure if that's your requirement.

<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" id="mainImage">

<!-- You can remove Href attribute from area to make sure they're not redirecting to a different page -->
<map name="workmap">
  <area id="computer" shape="rect" coords="34,44,270,350" alt="Computer">
  <area shape="rect" coords="290,172,333,250" alt="Phone">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee">
</map>

<script>

// This will change the image when you mouseover the Computer.
// This is just a basic example that will help you understand how you can change the main image on mouseover.
 
var computerArea = document.querySelector("#computer");
var mainImage = document.querySelector("#mainImage");

// Adding mouseover listener to the computer area - this could be done for other parts as well.
computerArea.addEventListener("mouseover", function(e){
    mainImage.src = "https://lh3.googleusercontent.com/proxy/4K3cpWUfEVjCSCpoFfYGq2i8KBZZ0f52WQrO7A1e-SzmoX78gwahuwM_Y6u6dR6PhMHuxiP145NiLptVvUQSYfSbQtt0QjDncQ" // Your new image
});
</script>

Thank you so much! I can understand what's doing, but if I use , it will the href=" " will take me to another HTML page. What I want is that my mouse pointer move over a particular part of the image then the image change to another image, on the same page. — Jason Wu, Apr 04 '21 at 14:41
@JasonWu - Please try this: https://codepen.io/rehanhaider/pen/OJWgyyO?editors=1000 — Rehan H, Apr 04 '21 at 15:53

How to display a new picture when my mouse move to a certain area of the picture?

1 Answers1