鼠标悬停文字上显示图片

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

秒客网

鼠标悬停文字上显示图片

相关文章