码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-11-13 00:45:34      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

转载: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> 
 

 

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

标签:

原文地址:http://www.cnblogs.com/jameslif/p/4960604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!