交换图像的Javascript函数

我应该 编写并使用JavaScript函数将内容插入HTML元素： •创建一个名为swapOut的函数，该函数包含以下语句：document.imageFlip.src=“第一个图像的名称”。 •创建一个名为swapBack的函数，该函数包含以下语句：document.imageFlip.src=“第二个图像的名称”。 •插入带有myImage id和名称的div标签。
•在div容器内，插入一个带有id和imageFlip名称的图像标签。初始化图像标记以显示第一个图像。设置高度和宽度属性。将alt和title属性设置为“可交换图像”。 alt=“可交换图像”title=“可交换图像”height=“”width=“”

•在图像标记内，添加onmouseover=“swapOut（）”和onmouseout=“swapBack（）”。这些定义了image元素可以识别的事件。当您将鼠标移到图像上时，第一个调用swapOut函数；当您将鼠标移离图像时，第二个调用swapBack函数

到目前为止，我已经做到了这一点。 在我的.js表单中，我有

function swapOut() {
    document.imageFlip.src = "firstImage"
}

function swapBack() {
    document.imageFlip.src = "secondImage"
}

在我的.htm表格中，我有

<div id="myImage" name="myImage">


<img src="firstImage.png" alt="Swappable image" title="Swappable image" id="imageFlip" 
name="imageFlip" onmouseout="swapBack()" onmouseover="swapOut()" height="200" width="200"/>


</div>

---

我需要交换图像，但我得到了第一张图像，但是当我将鼠标悬停在上面时，我只得到一个没有图片的框

请确保分配给“src”属性的内容具有完整的图像路径和扩展名

就你的情况来说

document.imageFlip.src = "firstImage.png"
// or
document.imageFlip.src = "secondImage.png"

你也可以使用

document.getElementById('imageFlip').src = "firstImage.png"

---

如果你不想在任何地方都使用name属性，这是做这类事情的常用方法，而且（我可能错了），但我认为name属性在HTML5中不受欢迎。

你错过了图像的扩展。

<img src="firstImage.png" alt="Swappable image" title="Swappable image" onMouseOver="this.src='secondImage.png'" onMouseOut="this.src='firstImage.png'" height="200" width="200"/>

只需浏览一下您的代码，您的代码中缺少替换“src”属性的字符串中的图像扩展名。比如“firstImage.jpg”。非常感谢你，我真的非常感谢你一直以来对我的帮助！没问题。如果它真的解决了你的问题，我会把它写进一个答案。