怎样实现鼠标置于图象上在图象旁边显示另一张图片?该怎么解决
日期：2014-05-17 浏览次数：20804 次
怎样实现鼠标置于图象上在图象旁边显示另一张图片?
在HTML中有一图片1.gif,怎么样才能实现在浏览器中将鼠标放在图片上时 便在图片1.gif的旁边显示另外一张图片2.gif呢? 要用到Jscript吗?具体怎么实现?
<img src= "1.gif "/> 请各位指教
------解决方案--------------------
<html>
<style>
img.show{
display:inline;
}
img.hide{
display:none;
}
</style>
<body>
<img id= "img1 " src= "01.jpg " width= "100 " height= "80 "
onmouseover= "document.getElementById( 'img2 ').className= 'show ' "
onmouseout= "document.getElementById( 'img2 ').className= 'hide ' "
/>
<img id= "img2 " src= "02.jpg " width= "100 " height= "80 " class= "hide "/>
</body>
</html>
------解决方案--------------------
参考下面的函数:
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display= " ";
if(url!=null){
my_tips.innerHTML= " <div style= 'width:180px;height:20px;padding:0px;border:1px solid red; '> "+tips+ " </span> ";
}
else{
innerHTML_temp = " <table width= '165 ' border= '0 ' cellpadding= '0 ' cellspacing= '0 ' class= 'viewWindow '> ";
innerHTML_temp += " <tr> <td width= '165 ' height= '22 ' background= './images/view_border_top.gif ' align= 'center '> 内容 </td> </tr> ";
innerHTML_temp += " <tr> <td height= '157 ' valign= 'top ' background= './images/view_boder_middle.gif '> "+tips+ " </td> ";
innerHTML_temp += " <tr> <td height= '4 ' valign= 'top '> <img src= './images/view_border_bottom.gif ' width= '165 ' height= '4 ' /> </td> </tr> ";
innerHTML_temp += " </table> ";
my_tips.innerHTML=innerHTML_temp;
}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else{
my_tips.style.display= "none ";
}
}
在HTML中有一图片1.gif,怎么样才能实现在浏览器中将鼠标放在图片上时 便在图片1.gif的旁边显示另外一张图片2.gif呢? 要用到Jscript吗?具体怎么实现?
<img src= "1.gif "/> 请各位指教
------解决方案--------------------
<html>
<style>
img.show{
display:inline;
}
img.hide{
display:none;
}
</style>
<body>
<img id= "img1 " src= "01.jpg " width= "100 " height= "80 "
onmouseover= "document.getElementById( 'img2 ').className= 'show ' "
onmouseout= "document.getElementById( 'img2 ').className= 'hide ' "
/>
<img id= "img2 " src= "02.jpg " width= "100 " height= "80 " class= "hide "/>
</body>
</html>
------解决方案--------------------
参考下面的函数:
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display= " ";
if(url!=null){
my_tips.innerHTML= " <div style= 'width:180px;height:20px;padding:0px;border:1px solid red; '> "+tips+ " </span> ";
}
else{
innerHTML_temp = " <table width= '165 ' border= '0 ' cellpadding= '0 ' cellspacing= '0 ' class= 'viewWindow '> ";
innerHTML_temp += " <tr> <td width= '165 ' height= '22 ' background= './images/view_border_top.gif ' align= 'center '> 内容 </td> </tr> ";
innerHTML_temp += " <tr> <td height= '157 ' valign= 'top ' background= './images/view_boder_middle.gif '> "+tips+ " </td> ";
innerHTML_temp += " <tr> <td height= '4 ' valign= 'top '> <img src= './images/view_border_bottom.gif ' width= '165 ' height= '4 ' /> </td> </tr> ";
innerHTML_temp += " </table> ";
my_tips.innerHTML=innerHTML_temp;
}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else{
my_tips.style.display= "none ";
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
