當我們在寫一個網頁程式的時候，很多方法可以提供頁面的動態顯示，從而提高頁面的視覺效果。 本例就是通過一個簡單的Javascript代碼動態顯示圖片的資訊的，其實這樣的例子很多，所以這裡只做簡單的說明了。
現在就建立一個頁面，代碼如下所示：
Code
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 <title>JS函數實現滑鼠指向後帶圖片的提示效果</title>
5 <script language="javascript">
6 function showPic(sUrl){
7 var x,y;
8 x = event.clientX;
9 y = event.clientY;
10 document.getElementById("Layer1").style.left = x;
11 document.getElementById("Layer1").style.top = y;
12 document.getElementById("Layer1").innerHTML = "<img width=200 height=200 src=\""
13 + sUrl + "\">";
14 document.getElementById("Layer1").style.display = "block";
15 }
16 function hiddenPic(){
17 document.getElementById("Layer1").innerHTML = "";
18 document.getElementById("Layer1").style.display = "none";
19 }
20 </script>
21 </head>
22 <body>
23 <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
24 <img src="100_0899.JPG" width=50 height=50 onmouseout="hiddenPic();"
25 onmousemove="showPic(this.src);" />
26 <p></p>
27 <img src="100_0909.JPG" width=50 height=50 onmouseout="hiddenPic();"
28 onmousemove="showPic(this.src);" />
29 </body>
30 </html>
31
上面的代碼效果如所示：
希望這段代碼對大家能有用。
