你可以使用JavaScript中的事件監聽器和DOM操作來實現鼠標經過圖片時更換圖片。
首先,你需要給目標圖片元素添加一個事件監聽器,監聽鼠標經過事件。然后,在事件處理函數中,你可以通過改變目標圖片元素的src屬性來更換圖片。
以下是一個示例代碼:
HTML:
<img id="myImage" src="image1.jpg" alt="Image">
JavaScript:
var image = document.getElementById("myImage");
// 添加事件監聽器
image.addEventListener("mouseover", function() {
// 鼠標經過時更換圖片
image.src = "image2.jpg";
});
// 添加事件監聽器
image.addEventListener("mouseout", function() {
// 鼠標移出時恢復原始圖片
image.src = "image1.jpg";
});
在上面的代碼中,當鼠標經過圖片時,事件處理函數會將圖片的src屬性更改為"image2.jpg",當鼠標移出圖片時,事件處理函數會將圖片的src屬性恢復為"image1.jpg"。