Javascript函数交换图像答案

【问题标题】：Javascript functions Swapping ImagesJavascript函数交换图像
【发布时间】：2012-11-12 04:04:42
【问题描述】：

我应该编写并使用 JavaScript 函数将内容插入 HTML 元素： • 创建一个名为swapOut 的函数，其中包含以下语句：document.imageFlip.src="name of the first image"。 • 创建一个名为swapBack 的函数，其中包含以下语句：document.imageFlip.src="name of the second image"。 • 插入一个 id 和名称为 myImage 的 div 标签。
• 在 div 容器内，插入一个 ID 和名称为 imageFlip 的图像标签。初始化图像标签以显示第一张图像。设置高度和宽度属性。将 alt 和 title 属性设置为“Swappable image”。 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>

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

【问题讨论】：

只是看了一眼您的代码，您缺少替换“src”属性的字符串中的图像扩展名。像'firstImage.jpg'。
非常感谢，非常感谢我一直在查看该表格的帮助！
没有问题。如果它确实解决了你的问题，我会把它放在答案中。

标签： javascript

【解决方案1】：

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

你的情况是

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

你也可以使用

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

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

【讨论】：

【解决方案2】：

你错过了图像的扩展。

【讨论】：

【解决方案3】：

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

【讨论】：