鼠标指向图片1时图片会变换成图片2的js代码，图片变换用document实现

以下是一种使用 DOM 操作实现的方式：

HTML 代码：

<img src="image1.jpg" id="myImage">

JavaScript 代码：

var myImage = document.getElementById("myImage");

myImage.addEventListener("mouseover", function() {
  this.src = "image2.jpg";
});

myImage.addEventListener("mouseout", function() {
  this.src = "image1.jpg";
});

解释：

1. JavaScript 代码中，首先使用 `document.getElementById` 方法获取图片元素，并将其存储在变量 `myImage` 中。
2. 然后使用 `addEventListener` 方法为图片元素添加 `mouseover` 和 `mouseout` 事件监听器。
3. 当鼠标指向图片时，`mouseover` 事件会触发函数，函数内部使用 `this.src` 将图片路径修改为 image2.jpg。
4. 当鼠标离开图片时，`mouseout` 事件会触发函数，函数内部使用 `this.src` 将图片路径修改为 image1.jpg。
5. 最后完成图片的变换效果。

相关问题

如何使用JavaScript实现在网页中，当鼠标悬停在图片上时使其变换另一张图，而在鼠标离开后能够恢复原图？

在JavaScript中，你可以通过结合HTML的`<img>`元素和CSS的`:hover`伪类以及JavaScript事件监听来实现这种动态效果。下面是一个简单的例子：

首先，设置两张图片作为源和替换图像，给它们提供唯一的ID：

<img id="originalImage" src="image1.jpg" alt="Original Image">
<img id="hoveredImage" src="image2.jpg" style="display:none;" alt="Hovered Image">

然后，在JavaScript中添加`mouseover`和`mouseout`事件监听器：

document.getElementById('originalImage').addEventListener('mouseover', function() {
  this.src = document.getElementById('hoveredImage').src;
});

document.getElementById('originalImage').addEventListener('mouseout', function() {
  this.src = 'image1.jpg'; // 或者你可以直接指向原始图片的路径
});

这段代码的工作原理是：当鼠标指针移到`originalImage`上方时，它的`src`属性会被改变为`hoveredImage`的URL，图片就会显示为第二张；当鼠标移开时，图片会自动恢复到原来的`image1.jpg`。