鼠标悬停文字上显示图片

当鼠标移上文字上方时,显示对应的图片.此方法兼容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 >

转载于:https://www.cnblogs.com/s021368/articles/1738372.html