Как поменять изображение при наведении мыши и вернуться к исходному при наведении мыши? - PullRequest
Новая
       1

Как поменять изображение при наведении мыши и вернуться к исходному при наведении мыши?

1 голос
/ 16 апреля 2019

Привет всем, я новичок в сообществе и надеюсь найти помощь!Я на начальном уровне в JavaScript!пытался сделать это, но не могу найти что-нибудь в Интернете, надеюсь, кто-то может мне помочь! 

 <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">

Мне бы хотелось, чтобы изображение поменялось с 1p до 1c при наведении мышии от 1с до 1р при наведении мышки!

Ответы [ 4 ]

1 голос
/ 16 апреля 2019

Что делает и не делает ваш скрипт. 

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";
    })
})

Как исправить. 

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";
    });
})
0 голосов
/ 16 апреля 2019 
   <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>
0 голосов
/ 16 апреля 2019

Ваша идея абсолютно правильная, но вы допустили некоторые ошибки в программировании. Я не думаю, что это хорошая идея - использовать continuous assignment в Javascript, что считается плохой практикой во многих языках. 

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

В приведенной выше строке sImg1 - это "images/image_1P.jpg", а не 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>
0 голосов
/ 16 апреля 2019

Нет идентификатора с img1.Это должно быть myImg1.Таким образом, ваш var sImg1 = document.getElementById("img1") равен null.

Есть много других проблем с вашим кодом.В строке var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";.Вы не выбираете элемент, вместо этого вы выполняете операцию присваивания.Итак, ваш sImg1 будет иметь image path.Это похоже на выполнение const a = b = 10;

После добавления прослушивателей событий у вас есть sImg1.getElementById("myImg1"), что неверно.Это должно быть 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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...