zoukankan      html  css  js  c++  java
  • 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> 
     
  • 相关阅读:
    呼叫中心获取sip数据报文
    【代码总结】GD库中简单的验证码
    【代码学习】PHP中GD库的使用
    【漏洞详解】文件包含漏洞
    讲两道常考的阶乘算法题
    如何高效解决接雨水问题
    如何判定括号合法性
    二分查找高效判定子序列
    一道数组去重的算法题把东哥整不会了
    如何高效寻找素数
  • 原文地址:https://www.cnblogs.com/jameslif/p/4960604.html
Copyright © 2011-2022 走看看