4.京东狗

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         //window.onload页面加载完毕以后再执行此代码
 8         window.onload = function () {
 9             //需求：鼠标放到img上，修改路径（src的值）。
10             //步骤：
11             //1.获取事件源
12             //2.绑定事件
13             //3.书写事件驱动程序
14 
15             //1.获取事件源
16             var img = document.getElementById("box");
17             //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
18             img.onmouseover = function () {
19                 //3.书写事件驱动程序(修改src)
20                 img.src = "image/jd2.png";
21 //                this.src = "image/jd2.png";
22             }
23 
24 
25             //1.获取事件源
26             var img = document.getElementById("box");
27             //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
28             img.onmouseout = function () {
29                 //3.书写事件驱动程序(修改src)
30                 this.src = "image/jd1.png";
31             }
32 
33             //获取事件源（元素可以不获取直接使用id的值）
34 //            var img = document.getElementById("box");
35 //            //调用函数
36 //            img.onmouseover = fn1;
37 //            img.onmouseout = fn2;
38 //            //定义函数
39 //            function fn1() {
40 //                img.src = "image/jd2.png";
41 //            }
42 //            function fn2() {
43 //                img.src = "image/jd1.png";
44 //            }
45 
46         }
47     </script>
48 </head>
49 <body>
50 
51     <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
52 
53 </body>
54 </html>