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>