网站建设

鼠标放到图片上改变图片

daimafengzi · 2月12日 · 2022年本文共446个字 · 预计阅读2分钟6次已读
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
            img.onmouseover = function () {
            //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
            }
            img.onmouseout = function () {
                this.src = "image/jd1.png";
            }
        }
    </script>
</head>
<body>
    <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
0 条回应