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