CODEWITHSUNDEEP
javascripthtmlimage
Fabio Brizzi
Fabio Brizzi

Reputation: 55

How to swap image on mouseover and back to the original one on mouseout?

Hi everyone im new to the community and hope to find some help! Im at beginner level at javascript! been trying to have this done but can't seem to find anything online hope someone can help me out!

 <script>
    window.addEventListener("load", function() {

        var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";

        // mouseover
        sImg1.addEventListener("mouseover", function() {
                sImg1.getElementById("myImg1").src = "images/image_1C.jpg";
            })
            //mouseout
        sImg1.addEventListener("mouseout", function() {
            sImg1.getElementById("myImg1").src = "images/image_1P.jpg";
        })
    })
</script>



<body>
<img class="img1" id="myImg1" src="" width="150" height="200">

Id like for the image to swap from 1p to 1c on mouseover and from 1c to 1p on mouseout !

Upvotes: 1

Views: 59

Answers (4)

Atchutha rama reddy Karri
Atchutha rama reddy Karri

Reputation: 1569

   <head>
    <style type="text/css">
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
 </style>
</head>
<body>
    <div class="card">
    <img src="/examples/images/card-back.jpg" alt="Card Back">

    <img src="/examples/images/card-front.jpg" class="img-top" alt="Card Front">

    </div>
</body>

Upvotes: 0

random
random

Reputation: 7891

There is no id with img1. It should be myImg1. So your var sImg1 = document.getElementById("img1") is null.

There are many other problems with your code. In line var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";. You are not selecting the element, instead you are doing assignment operation. So, your sImg1 will have image path. It is similar like doing const a = b = 10;

After you add event listeners, you have sImg1.getElementById("myImg1"), which is incorrect. It should be document.getElementById("myImg1").

window.addEventListener("load", function() {
    const sImg1 = document.getElementById("myImg1");

    sImg1.src= "images/image_1P.jpg"
    sImg1.alt = "image_1P.jpg";

    sImg1.addEventListener('mouseover', function() {
        sImg1.src = "images/image_1C.jpg";
        sImg1.alt = "image_1C.jpg";
    });

    sImg1.addEventListener('mouseout', function() {
        sImg1.src = "images/image_1P.jpg";
        sImg1.alt = "image_1P.jpg";
    });
});
<img class="img1" id="myImg1" src="" width="150" height="200">

Upvotes: 0

sfy
sfy

Reputation: 3228

Your idea is absolutely right， but you made some programming mistakes. I don't think it is a good idea to use continuous assignment in Javascript, which is considered a bad practice in many languages.

var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";

In the above line, sImg1 is "images/image_1P.jpg", not dom.

<script>
    window.addEventListener("load", function() {

        var sImg1 = document.getElementById("img1")
        sImg1.src = "images/image_1P.jpg";

        // mouseover
        sImg1.addEventListener("mouseover", function() {
                // you have sImg1 already
                sImg1.src = "images/image_1C.jpg";
            })
            //mouseout
        sImg1.addEventListener("mouseout", function() {
            sImg1.src = "images/image_1P.jpg";
        })
    })
</script>

Upvotes: 0

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

What your script does and doesn't.

window.addEventListener("load", function() {

    var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";
    //sImg1 is a string which doesn't have events

    // mouseover makes no sense (see above)
    sImg1.addEventListener("mouseover", function() {
            sImg1.getElementById("myImg1").src = "images/image_1C.jpg";
        })
        //mouseout
    sImg1.addEventListener("mouseout", function() {
        sImg1.getElementById("myImg1").src = "images/image_1P.jpg";
    })
})

How to fix.

window.addEventListener("load", function() {

    var sImg1 = document.getElementById("myImg1");
    sImg1.src = "images/image_1P.jpg";

    // mouseover
    sImg1.addEventListener("mouseover", function() {
            //this is an event source
            this.src = "images/image_1C.jpg";
        });
        //mouseout
    sImg1.addEventListener("mouseout", function() {
        this.src = "images/image_1P.jpg";
    });
})

Upvotes: 1

Related Questions