当鼠标移上文字上方时,显示对应的图片.此方法兼容IE,FF,谷歌浏览器
1.event必须从外面传入.在FF才能正常运行
2.在给Layer1赋值是,FF,谷歌浏览器要求加上单位,此外为px
3.在FF在,加2单位的偏移量,不加的情况下鼠标被显示的层挡住,以致图片闪动或在某点出现一次.
html
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 鼠标悬停文字上显示图片 </ title >
< script language ="javascript" >
function showPic(e,sUrl){
var x,y;
x = e.clientX;
y = e.clientY;
document.getElementById( " Layer1 " ).style.left = x + 2 + ' px ' ;
document.getElementById( " Layer1 " ).style.top = y + 2 + ' px ' ;
document.getElementById( " Layer1 " ).innerHTML = " <img border='0' src=\ "" + sUrl + " \ " > " ;
document.getElementById( " Layer1 " ).style.display = "" ;
}
function hiddenPic(){
document.getElementById( " Layer1 " ).innerHTML = "" ;
document.getElementById( " Layer1 " ).style.display = " none " ;
}
</ script >
</ head >
< body >
< div id ="Layer1" style ="display: none; position: absolute; z-index: 100;" >
</ div >
< img src ="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout ="hiddenPic();"
onmousemove ="showPic(this.src);" />
< p >
< a href ="" onmouseout ="hiddenPic();" onmousemove ="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg');" >
当鼠标指到标题时,鼠标显示对应图片 </ a >
</ p >
</ body >
</ html >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 鼠标悬停文字上显示图片 </ title >
< script language ="javascript" >
function showPic(e,sUrl){
var x,y;
x = e.clientX;
y = e.clientY;
document.getElementById( " Layer1 " ).style.left = x + 2 + ' px ' ;
document.getElementById( " Layer1 " ).style.top = y + 2 + ' px ' ;
document.getElementById( " Layer1 " ).innerHTML = " <img border='0' src=\ "" + sUrl + " \ " > " ;
document.getElementById( " Layer1 " ).style.display = "" ;
}
function hiddenPic(){
document.getElementById( " Layer1 " ).innerHTML = "" ;
document.getElementById( " Layer1 " ).style.display = " none " ;
}
</ script >
</ head >
< body >
< div id ="Layer1" style ="display: none; position: absolute; z-index: 100;" >
</ div >
< img src ="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout ="hiddenPic();"
onmousemove ="showPic(this.src);" />
< p >
< a href ="" onmouseout ="hiddenPic();" onmousemove ="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg');" >
当鼠标指到标题时,鼠标显示对应图片 </ a >
</ p >
</ body >
</ html >