鼠标指向图片1时图片会变换成图片2的js代码

以下是一种实现方式：

HTML 代码：

<img src="image1.jpg" onmouseover="changeImage(this)" onmouseout="changeImage(this)">

JavaScript 代码：

function changeImage(img) {
  if (img.src.match(/image1\.jpg$/)) {
    img.src = "image2.jpg";
  } else {
    img.src = "image1.jpg";
  }
}

解释：

1. HTML 代码中，`<img>` 标签的 `src` 属性指定了初始图片的路径，并添加了 `onmouseover` 和 `onmouseout` 事件监听器，当鼠标指向图片时和离开图片时分别触发事件。
2. JavaScript 代码中，`changeImage` 函数接受一个参数 `img`，表示当前触发事件的图片元素。
3. 函数内部使用正则表达式判断当前图片的路径是否为 image1.jpg，如果是，则将图片路径修改为 image2.jpg，否则将图片路径修改为 image1.jpg。
4. 最后将修改后的图片路径赋值给 `img.src`，完成图片的变换效果。

相关问题

鼠标指向图片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. 最后完成图片的变换效果。