alt与title效果(可显示图片) 鼠标滑过文字显示图片

两天
教程学习516.7K6阅读模式

alt与title效果(可显示图片)

鼠标滑过文字时alt显示图片。

代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <STYLE type=text/css>BODY {  
  5.     MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"  
  6. }  
  7. A {  
  8.     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none  
  9. }  
  10. A:hover {  
  11.     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline  
  12. }  
  13. A:active {  
  14.     FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033  
  15. }  
  16. </style>  
  17. <title>Untitled Document</title>  
  18. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  19. </head>  
  20. <body>  
  21. <script>  
  22. function show(tips,flag,url){  
  23. var my_tips=document.all.mytips;  
  24. if(flag){  
  25.     my_tips.style.display="";  
  26.     if (url!=null){my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;}  
  27.     else{ my_tips.innerHTML=tips;}  
  28.     my_tips.style.left=event.clientX+10;  
  29.     my_tips.style.top=event.clientY+10;  
  30.    }  
  31. else   
  32. {  
  33.    my_tips.style.display="none";  
  34.    }  
  35. }  
  36. </script>  
  37. <a href="#" tips="自定义提示" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>测试链接</a>  
  38. <a href="#" tips="又一个自定义提示" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0,'http://www.baidu.com/img/baidu_logo_jr_0808_aykms.gif')>测试链接</a>     
  39. <a href="#" tips="中华人民共和国中华人民共和国自定义提示" onmouseover=show(this.tips,1,'http://www.baidu.com/img/baidu_logo_jr_0808_aykms.gif') onmouseout=show(this.tips,0,'http://www.baidu.com/img/baidu_logo_jr_0808_aykms.gif')>测试链接</a>     
  40. <div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">  
  41. </div>  
  42. </body>  
  43. </html>  

本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有。若您需要使用非免费的软件或服务，请购买正版授权并合法使用。本站发布的内容若侵犯到您的权益，请联系站长删除，我们将及时处理。

SEO WordPress的Description、Keywords和Title(完整版)
SEO WordPress的Description、Keywords和Title(完整版)
SEO WordPress的Description、Keywords和Title(完整版)
N张图组合成一张图
N张图组合成一张图
N张图组合成一张图
26字母的含义
26字母的含义
26字母的含义
WordPress 网站使用 CDN 后获取访客真实 IP
WordPress 网站使用 CDN 后获取访客真实 IP
WordPress 网站使用 CDN 后获取访客真实 IP
我的微信
微信扫一扫
weinxin
我的微信
我的QQ
QQ扫一扫
weinxin
312379857
 
两天
  • 本文由 两天 发表于 2014年09月13日 17:43:43
  • 转载请务必保留本文链接：https://2days.org/2632.html
  • 图片
  • Title
  • 鼠标滑过文字显示图片
  • alt
评论  5  访客  3  作者  2
    • 若雁
      若雁 9
      湖北省 3F
      回复

      顶上去!顶上去!

      • 胖蒜
        胖蒜 1
        广东省汕头市 2F
        回复

        这个东西很重要吗？

          • 两天
            两天
            山东省 B1
            回复

            @ 胖蒜 不算重要，小玩意而已

          • Rememberautumn
            Rememberautumn 2
            山东省烟台市 1F
            回复

            不错

          匿名

          发表评论

          匿名网友
          :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
          确定