Question

我应该这样做编写并使用JavaScript函数将内容插入HTML元素： •创建名为swapOut的函数，其中包含以下语句：document.imageFlip.src =“第一个图像的名称”。 •创建一个名为swapBack的函数，其中包含以下语句：document.imageFlip.src =“第二个图像的名称”。 •插入一个id为myImage的div标签 •在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

确保您分配给您的＆＃39; src＆＃39;属性具有完整的图像路径和扩展名。

对于你的情况，它将是

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

您也可以使用

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

如果您不想在任何地方使用name属性，这是执行此类事情的常用方法，并且（我可能错了）但我认为在HTML5中不推荐使用name属性。

Answer 2

您错过了图片的扩展名。

Answer 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"/>

Javascript函数交换图像

3 个答案: