2021-10-05 鼠标移入移出更改图片的例子

原创已于 2022-02-21 18:48:37 修改 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2021-10-05 19:57:57 首次发布

项目与应用专栏收录该内容

67 篇文章

订阅专栏

这篇博客介绍了两种使用JavaScript实现鼠标移入图片时更换图片源，移出时恢复原图的方法。通过为img标签添加onmouseover和onmouseout事件监听，动态改变图片的src属性，实现了简单的交互效果。

    <!-- 例子:鼠标移入,更换图片 -->
    <!-- 方法一: -->
    <!-- <img src="../../Pictures/east/IMG_20210403_113942.jpg" id="thepic" οnmοuseοver="fn5 -->
    <!-- ()" width="300" height="250"> -->
    <script>
        // function fn5() {
        //     document.getElementById("thepic").src = ".././../Pictures/east/IMG_20210320_203346.jpg"
        // }
        // var imgObj = document.getElementById("thepic");
        // var fn5 = function() {
        //     imgObj.src = ".././../Pictures/east/IMG_20210320_203346.jpg";
        //     console.log("rrrr");

        // }
    </script>
    <!-- 方法二:根据标签名获取标签 -->
    <img src="../../Pictures/east/IMG_20210403_113942.jpg" id="thepic" width="300" height="250">
    <script>
        var oImg = document.querySelector("img"); //根据标签名,查找页面元素
        oImg.onmouseover = function() {
            oImg.src = ".././../Pictures/east/IMG_20210320_203346.jpg";
        }
        oImg.onmouseout = function() {
            oImg.src = ".././../Pictures/east/IMG_20210403_113942.jpg";
        }
    </script>