JavaScript函数实现鼠标指向后带图片的提示效果

转载：http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html

当我们在写一个网页程序的时候，很多方法可以提供页面的动态显示，从而提高页面的视觉效果。本例就是通过一个简单的Javascript代码动态显示图片的信息的，其实这样的例子很多，所以这里只做简单的说明了。

现在就创建一个页面，代码如下所示：

 <html>

<head>

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

 <title>JS函数实现鼠标指向后带图片的提示效果</title>

 <script language="javascript">

 function showPic(sUrl){

  var x,y;

  x = event.clientX;

 y = event.clientY;

 document.getElementById("Layer1").style.left = x;

 document.getElementById("Layer1").style.top = y;

 document.getElementById("Layer1").innerHTML = "<img width=200 height=200 src=\""

 + sUrl + "\">";

 document.getElementById("Layer1").style.display = "block";

 }

 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:1;"></div>

 <img src="100_0899.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 <p></p>

 <img src="100_0909.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 </body>

</html>