1

我应该编写并使用 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>

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

4

3 回答 3

0

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

对于您的情况，它将是

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

你也可以使用

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

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

于 2012-11-12T04:19:30.943 回答
0

您错过了图像的扩展名。

于 2012-11-12T04:25:45.590 回答
0 
<img src="firstImage.png" alt="Swappable image" title="Swappable image" onMouseOver="this.src='secondImage.png'" onMouseOut="this.src='firstImage.png'" height="200" width="200"/>
于 2012-11-12T04:40:30.657 回答