怎样实现鼠标经过或悬停一张图片时弹出另一张图片

想要在网页中实现鼠标经过或悬停一张图片时弹出另一张图片,弹出的图片可以点击 要怎样实现呀?用JS的话 麻烦把详细代码贴出来。。。小白一只T T PS:不是放大原图啊~

这是用dreamwaver自带的行为做的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 147px; top: 30px; visibility: hidden; } --> </style> <script type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_showHideLayers() { //v6.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> </head> <body> <img src=" http://cache.soso.com/wenwen/i/w_logo.png" width="160" height="28" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')" /> <div id="Layer1"><img src=" http://cache.soso.com/wenwen/i/w_logo.png" width="160" height="28" /></div> </body> </html>
温馨提示:内容为网友见解,仅供参考
第1个回答  2020-01-16
你可以,自己写一个div,用隐藏和显示来做,要简单些。。

html怎么实现当鼠标经过一个图片时显示另一张图片
1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。5、然后设定经过事件,切换成另一...

怎样实现鼠标经过或悬停一张图片时弹出另一张图片
这是用dreamwaver自带的行为做的 <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" " http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> 无标题文档 <!-- #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 147px; top:...

DW怎么实现当鼠标放到图片上时,鼠标旁边就会弹出另一张图片。
如果你说的在“鼠标旁边就会弹出另一张图片”是说在固定位置的话,那你用DW的“层”结合“行为”应该就可以实现的,在行为面板里,找onmouseover,然后改display的值,显示为block,隐藏为none。如果你说的意思是,让那个弹出来的图片随着鼠标的位置不断变换位置的话,那用简单的DW操作是不能实现的,一...

DW如何在原有的图片上加鼠标经过显示出另外的图片
a:hover{backgroud:这里是图片地址 }

MFC中,鼠标移动到一张图片上,然后显示另外一张图片
需求描述不清,说明需要实现的环境和窗口类型。重载窗口OnMouseMove函数,用函数PtInRect判断鼠标位置是否在指定的Rect之内即可。

HTML语言中怎么让鼠标移动到一张图片上时变成另一张图片
需要用到js脚本的onmouseover和onmouseout等。这是非常简单的。但是如果你不了解js可以使用DreamWeaver中的一项功能:插入--图像对象--鼠标经过图像,在弹出的对话框中,选择好“原始图像”和“鼠标经过图像”就行了。

html使用onmouseover事件怎么设置鼠标移动到图片或者文字上在旁边弹出一...
\/images\/yumen1.jpg'"onmouseout="this.src='..\/images\/yumen.jpg'"width="100"height="28"><\/A>...\/\/设置一个div,但是默认却是隐藏起来的。.s1{ position: absolute;display: none;} \/\/ js function show(){ document.getElementById("s1").style.display="block";} function dis ...

网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑...
<!DOCTYPE html>图片热区hover效果 .main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} \/* 宽度与高度必须与背景大图一致 *\/.bigImg {position: absolute; display: none; border: 1px solid #ccc;}.img1 {top: 199px; left: 153px;}.img2 {top: 369...

求个"鼠标经过一张图片的时候帮边弹出另一张图片"的js代码???_百度知...
hidden{position:absolute; top:100px;left:200px;display:none;} one:hover #hidden{display:block;}} ---> 或者使用js控制;var one=document.getElementById('one'),hidden=document.getElementById('hidden');one.onmouseover=function(){ hidden.style.display='block';} ...

在网页中怎么实现鼠标经过图片切换成另一张图片(不要DW自带的JS代码,具...
var oImg=document.getElementsByTagName('img')[0]; 找到这个图片 oImg.onmouseover=function(){ oImg.src='1.jpg'} 滑过时这个图片变成1.jpg oImg.onmouseout=function(){ oImg.src='2.jpg'} 离开变成2.jpg

相似回答