<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload頁面加載完畢以后再執行此代碼
window.onload = function () {
//需求：鼠標放到img上，修改路徑（src的值）。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件)
img.onmouseover = function () {
//3.書寫事件驅動程序(修改src)
// img.src = "image/jd2.png";
this.src = "image/jd2.png";
}
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件)
img.onmouseout = function () {
//3.書寫事件驅動程序(修改src)
this.src = "image/jd1.png";
}
//獲取事件源（元素可以不獲取直接使用id的值）
// var img = document.getElementById("box");
// //調用函數
// img.onmouseover = fn1;
// img.onmouseout = fn2;
// //定義函數
// function fn1() {
// img.src = "image/jd2.png";
// }
// function fn2() {
// img.src = "image/jd1.png";
// }
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
change pic
