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  ></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>