Javascript 如何在mouseover上交换图像并返回mouseout上的原始图像？_Javascript_Html_Image

Javascript 如何在mouseover上交换图像并返回mouseout上的原始图像？

javascript html image

Javascript 如何在mouseover上交换图像并返回mouseout上的原始图像？,javascript,html,image,Javascript,Html,Image,大家好，我是这个社区的新手，希望能找到一些帮助！我是javascript的初学者！一直在努力做到这一点，但似乎找不到任何在线希望有人能帮助我 <script> window.addEventListener("load", function() { var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg"; // mouseover s

大家好，我是这个社区的新手，希望能找到一些帮助！我是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">


addEventListener（“加载”，函数（）{
var sImg1=document.getElementById（“img1”）.src=“images/image_1P.jpg”；
//鼠标盖
sImg1.addEventListener（“mouseover”，function（）{
sImg1.getElementById（“myImg1”）.src=“images/image_1C.jpg”；
})
//灭鼠器
sImg1.addEventListener（“mouseout”，function（））{
sImg1.getElementById（“myImg1”）.src=“images/image_1P.jpg”；
})
})

我想让图像在鼠标上从1p切换到1c，在鼠标上从1c切换到1p

脚本做什么和不做什么

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

没有带有

img1

的id。它应该是

myImg1

。因此，您的

var sImg1=document.getElementById（“img1”）

是

null

您的代码还有许多其他问题。行中

var sImg1=document.getElementById（“img1”）.src=“images/image_1P.jpg”。您不是在选择元素，而是在执行赋值操作。因此，您的sImg1
将具有图像路径
。类似于做const a=b=10
添加事件监听器后，会出现sImg1.getElementById（“myImg1”）
，这是不正确的。它应该是document.getElementById（“myImg1”）


window.addEventListener（“加载”，函数（）{
const sImg1=document.getElementById（“myImg1”）；
sImg1.src=“images/image\u 1P.jpg”
sImg1.alt=“image\u 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\u 1P.jpg”；
});
});
你的想法绝对正确，但你犯了一些编程错误。
我认为在Javascript中使用连续赋值
不是一个好主意，这在许多语言中被认为是一种不好的做法
var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";

在上面的一行中，sImg1
是“images/image\u 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>


addEventListener（“加载”，函数（）{
var sImg1=document.getElementById（“img1”）
sImg1.src=“images/image_1P.jpg”；
//鼠标盖
sImg1.addEventListener（“mouseover”，function（）{
//你已经有sImg1了
sImg1.src=“images/image_1C.jpg”；
})
//灭鼠器
sImg1.addEventListener（“mouseout”，function（））{
sImg1.src=“images/image_1P.jpg”；
})
})

.卡片{
宽度：130px；
高度：195px；
位置：相对位置；
显示：内联块；
利润率：50像素；
}
.card.img top{
显示：无；
位置：绝对位置；
排名：0；
左：0；
z指数：99；
}
.card:悬停。img顶部{
显示：内联；
}
这是评论，不是回答。请编辑或删除。@AlexKudryashev在手机上标记它。你们真的很快。非常感谢！这真的帮了我的忙@FabioBrizzi-如果答案解决了您的问题，请将其标记为已接受，以表明问题已解决。只需尝试代码。鼠标悬停时出现card-front.jpg图像。这里card-back.jpg被悬停时的card-front.jpg图像替换（参见样式中的css）好的。但是OP要求JS解决方案。
   <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>