将鼠标悬停在另一个图像上时,将图像替换为另一个图像
Replace an image with another when a different image is hovered on
我是一个彻头彻尾的菜鸟,所以请放轻松。
我正在尝试将一个图像替换为第二个图像,同时将鼠标悬停在不同的元素上。我的问题是只有第一个图像被链接图像替换。我已经给了每个图像一个ID,我只是不确定如何应用它。
提前感谢您提供的任何帮助!
这是我到目前为止所拥有的:
脚本:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
.HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<a href="javascript:warp()"><img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" /></a>
<a href="javascript:warp()"><img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" /></a>
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<a href="javascript:warp()"><img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" /></a>
<a href="http://www.dxmgp.com" onMouseover="changeimage(myimages[2],this.href)" onMouseout="changeimage(myimages[3],this.href)"><img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" /></a>
<a href="javascript:warp()"><img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" /></a>
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<a href="http://www.spatialinsights.com" onMouseover="changeimage(myimages[0],this.href)" onMouseout="changeimage(myimages[1],this.href)"><img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png"></a>
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
这样的事情怎么样?假设您有一个包含image1.png
的div
。将鼠标悬停在超链接上时,您希望将image1.png
替换为 image2.png
。然后,当您将鼠标移离超链接时,image2.png
将再次替换为image1.png
:
这是包含图像的div
:
<div id="image">
<img src="image1.png" />
</div>
这是超链接:
<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over to change image</a>
以下是JavaScript函数,它们将用不同的图像替换div
的内部HTML:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
让我知道这是否是您要找的。
相关文章:
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 如何在另一个html文件的框架中包含图像
- 当我点击MVC视图中的图像时,如何打开另一个页面
- 如何将图像制作为按钮并将其重定向到另一个页面
- 如何使用onclick事件点击一个图像,并让它更改同一网页上的另一个图像
- 如果我将宽度调整为另一个值,找出我的图像的高度
- 从imgur api的另一个浏览器拖放图像
- 使用漂亮的照片点击另一个元素显示图像
- 在 JavaScript 中将一个.PNG图像拖放到另一个图像上
- 如何在CSS中修复与另一个图像进行比较的图像
- 接受从另一个浏览器窗口拖放图像
- 在页面中使用了两次多个图像上传,但第一个正在工作,另一个不起作用
- 多个背景图像,一个覆盖另一个
- HTML链接到页面,但带有另一个图像(可以通过JavaScript更改)
- 使用 JQuery 从另一个元素的 id 为图像分配属性
- 用另一个替换现有图像
- Jquery-将图像从一个元素移动到另一个元素
- 当我在另一个画布上同时拖动另一个图像时,如何移动图像
- 当我点击一个图像时,如何将其更改为另一个图像