鼠标放到图片上改变图片

daimafengzi

2022-02-12 / 0 评论 / 0 阅读 / 正在检测是否收录...

02/12

温馨提示：

本文最后更新于2022年02月11日，已超过1622天没有更新，若内容或图片失效，请留言反馈。

&lt;!DOCTYPE html>
&lt;html>
&lt;head lang="en">
    &lt;meta charset="UTF-8">
    &lt;title>&lt;/title>
    &lt;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";
            }
        }
    &lt;/script>
&lt;/head>
&lt;body>
    &lt;img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
&lt;/body>
&lt;/html>

HTML+CSS

版权属于： daimafengzi

本文链接： https://luoweihua.cn/75.html

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

鼠标放到图片上改变图片

评论 (0)