Javascript 函数交换图像

Question

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

• 在图像标签内，添加onmouseover="swapOut()"和onmouseout= "swapBack()"。这些定义了图像元素识别的事件。当您将鼠标移到图像上时，第一个调用您的 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>

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

Answer 1

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

对于你的情况，它是

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

您也可以使用

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

如果您不想在任何地方使用 name 属性，这是执行此类操作的常见方法，并且(我可能是错的)但我认为 name 属性在 HTML5 中已被弃用。