写一段鼠标放到图片上 显示新的图片的js
时间: 2023-08-16 07:10:06 浏览: 49
当鼠标悬浮在图片上时,可以通过JavaScript来实现在图片下方显示一个新的图片或者是图片的描述信息。实现的代码如下:
HTML代码:
```
<img src="原始图片路径" onmouseover="showImage('新图片路径')" onmouseout="hideImage()" />
<div id="imageDescription"></div>
```
JavaScript代码:
```
function showImage(newImagePath) {
var imageDescription = document.getElementById("imageDescription");
imageDescription.innerHTML = "<img src='" + newImagePath + "' />";
}
function hideImage() {
var imageDescription = document.getElementById("imageDescription");
imageDescription.innerHTML = "";
}
```
在这段代码中,我们在原始图片标签中添加了两个事件处理函数:onmouseover和onmouseout。当鼠标悬浮在图片上时,会触发onmouseover事件,这时会调用showImage函数,在showImage函数中会通过innerHTML属性在id为imageDescription的div元素中添加一个新的图片,并且这个新的图片路径是通过函数参数传递的。当鼠标移开原始图片时,会触发onmouseout事件,这时会调用hideImage函数,在hideImage函数中会通过innerHTML属性将id为imageDescription的div元素中的内容清空。