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 //1.获取事件源
25 var img = document.getElementById("box");
26 //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
27 img.onmouseout = function () {
28 //3.书写事件驱动程序(修改src)
29 img.src = "image/jd1.png";
30 }
31 }
32 </script>
33 </head>
34 <body>
35
36 <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
37
38 </body>
39 </html>