zoukankan      html  css  js  c++  java
  • 如何实现网页上的气球提示

    工作一直压得喘不过气来,也好久没搜集.Net之外得东西了,作为一个程序开发人员,我经常羡慕那些界面上非常友好得网页,感觉一个人性化得界面也是赢取用户欢迎得最直接得方法,在开发window应用程序那会,经常遇到气球提示等问题,解决起来比较麻烦,今天在经典论坛转了下,发现了一个在网页上实现气球提示得好办法:基本原理就是用浮动层来显示提示信息,然后在层里面通过添加图片和背景图片来实现气球得效果。然后用js控制显示:
      <script>
    <!--设置在页面上鼠标经过得事件为quickalt-->    
    document.body.onmousemove=quickalt;
    <!--显示提示框方法,这个方法能让alt提示立即出现,而不是停留一段时间-->
    function quickalt() {
    if (event.srcElement.hint)
    {
      event.srcElement.alt=event.srcElement.hint;
    }
    if(event.srcElement.alt) {
    if(event.srcElement.alt!='')
    {
    event.srcElement.hint=event.srcElement.alt;
    altlayer.style.visibility='visible';
    altlayer.style.left=event.x-1;
    altlayer.style.top=event.y+20;
    alttext.innerHTML=event.srcElement.hint
    event.srcElement.alt="";
    }
    }
    else altlayer.style.visibility='hidden';}
    </script>

    以下是用于显示提示得div
    <div style="position:absolute;visibility:hidden" id="altlayer">
       <table id="divtb" border="0" cellspacing="0" cellpadding="0">
         <tr height="5px">
          <td width="2px"><img src="../Images/tooltip/tl.gif"/></td>
          <td background="../Images/tooltip/tm.gif"></td>
          <td width="2px"><img src="../Images/tooltip/tr.gif"/></td>
         </tr>
         <tr>
          <td style="border-left:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
          <td id="alttext" style="font-size:12px;padding:0 3px 0 3px;background-color:white;"></td>
          <td style="border-right:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
         </tr>
         <tr height="2px">
          <td width="2px"><img src="../Images/tooltip/bl.gif"/></td>
          <td style="border-bottom:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
          <td width="2px"><img src="../Images/tooltip/br.gif"/></td>
         </tr>
        </table>
       </div>

    这样在网页中有<a href="#" alt="你好">您好</a>就可以出现气球提示了!




  • 相关阅读:
    [原]【实例化需求】1.FitNesse工具应用简介
    [原][问题解决]常见问题的5种解决办法(由Jenkins问题解决谈起)
    [原][自动化测试]Robot Framework Selenium基本使用
    [原]好玩的Linux,关于时间cal命令
    [原][问题解决]Romote Control 图形化界面显示问题解决办法
    【SBE】由需求管理谈起
    [Robot]关于robot的几个学习网站
    coolite中在UserControl中使用Coolite.AjaxMethods方法
    javascript实现页面加载进度条(转)
    coolite 在前台更新Window中控件的值
  • 原文地址:https://www.cnblogs.com/jillzhang/p/304389.html
Copyright © 2011-2022 走看看