`
greennetboy
  • 浏览: 67418 次
文章分类
社区版块
存档分类
最新评论

如何实现网页上的气球提示

阅读更多

工作一直压得喘不过气来,也好久没搜集.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>就可以出现气球提示了!






jillzhang 2005-12-25 20:46 发表评论
分享到:
评论

相关推荐

    JavaScript+css+div实现的网页气球提示

    网页气球提示,使用JavaScript+css+div实现。弹出一个气球状提示层,并带有阴影(阴影有点类似谷歌地图中的那种阴影,半透明)。

    易语言气球提示框表情源码

    易语言气球提示框表情源码例程程序结合易语言扩展界面支持库,使用气球提示框的网页编辑功能实现QQ表情效果。易语言气球提示框表情源码是易语言气球提示框组件应用例程。资源作者:。@易语言资源网。资源下载:。

    易语言-易语言气球提示框表情

    易语言气球提示框表情源码例程程序结合易语言扩展界面支持库,使用气球提示框的网页编辑功能实现QQ表情效果。 易语言气球提示框表情源码是易语言气球提示框组件应用例程。

    北大青鸟javascript第10章作业参考

    1.使用jQuery库实现一个图片浏览功能。 2.模仿一些邮箱登录时的输入提示功能 ...当鼠标放置在超链接上,对应链接上方出现提示气球。 6.实现一个图片放大镜功能,当鼠标放置在对应缩略图上时,图片下方出现对应大图。

    vc++ 应用源码包_1

    独立打包,保证可解压,内含大量源码,网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标...VC然输入框出现气球提示 调用系统自带...

    vc++ 应用源码包_2

    独立打包,保证可解压,内含大量源码,网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、...VC然输入框出现气球提示 调用系统...

    vc++ 应用源码包_6

    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...

    vc++ 应用源码包_5

    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...

    vc++ 应用源码包_3

    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...

    vc++ 开发实例源码包

    该实例可进行局域网的聊天、一对多、多对一、和多对多的传送和续传,理论上这是我本人的实现目的,而且目前经测试已基本实现了上述功能,而且网速一般有几M/S。另外有只打开一个应用程序、CRichEdit的使用、最小到...

    实现类似Office助手的小精灵

    Agent支持文字气球和输入提示条,在输出语音的同时把文字输出至一个卡通式文字气球中。 如果电脑系统中安装有Agent语音识别引擎,当用户按住输入键,如Scroll Lock键,在Agent 人物下方出现一个输入命令窗口,表示...

    出现问题a is defined高手帮忙

    //实现框选放大缩小功能 function DragZoomControl(opts_boxStyle, opts_other, opts_callbacks) { this.globals = { draggingOn: false, cornerTopDiv: null, cornerRightDiv: null, ...

Global site tag (gtag.js) - Google Analytics