首页 > 建站/维护 > 鼠标停留在文字上显示图片
2014
12-11

鼠标停留在文字上显示图片


功能:鼠标停留在文字上显示图片

说明:当鼠标移上文字或图片上时,显示对应的图片。此方法兼容IE,FF,谷歌浏览器

效果展示如下:或请看本站顶部

鼠标停留在文字上显示图片

1.event必须从外面传入.在FF才能正常运行

2.在给Layer1赋值是,FF,谷歌浏览器要求加上单位,此外为px

3.在FF在,加2单位的偏移量,不加的情况下鼠标被显示的层挡住,以致图片闪动或在某点出现一次.


html代码部分


<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>鼠标停留在文字上显示图片</title>
<script type="text/javascript" src="show_pic.js"></script>  <!--鼠标停留展示图片-->

</head>

<body>

    <div id="Layer1" style="display: none; position: absolute; z-index: 100;"></div>
    <p>
        <a href="http://www.wusiwei.com/post-545.html" onmouseout="hiddenPic();" onmousemove="showPic(event,'http://i3.tietuku.cn/f6e2bcc201303fa1.jpg');">
            <img src="http://www.wusiwei.com/content/templates/frontopen2/images/wx.png"/></a>

    </p>

</body>

</html>


 


js代码部分


//by wusiwei.com at 20141210

   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";

                        }