|
一个页面上往往有很多链接按钮如果没有任何提示信息会让人很迷茫虽然IE也带提示功能只要给title属性赋值如下代码 <a # title=this a test>自带的提示</a>这样的提示很单调鼠标移上去的时候显示出来当鼠标在上面移动的时候提示信息不会跟随对比下面自定义的提示信息差别就很明显所以自定义的提示信息是很有必要的 把鼠标放到链接上看提示信息如何定制提示信息说起来很简单先画出提示信息层然后定位到目标对象下面把实现分三部来说明 ）绘制信息层 有两种方式一种是静态把层的html代码写在文档中另外一种是动态运用javascript脚本动态的创建层静态方式简单不灵活动态的灵活但比较困难需要熟悉脚本和Dom结构下面的代码是动态方式创建提示层 function createDivTooltip（） { var divTips = documentcreateElement（div）//create div element divTipsid=tooltip divTipsstyledisplay=none//invisible documentbodyappendChild（divTips） } ）定位信息层 function locate（e） { e=e||windowevent var divTips = documentgetElementById（tooltip） var mousePos=getMousePosition（e）//get the coordinate of the mouse divTipsstyletop=mousePostop+px divTipsstyleleft=mousePosleft+px }关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标》 ）附加事件 <a this is a test for tooltip onmouseover=showTooltip（event） onmousemove=locate（event） onmouseout=hideTooltip（event）>click to do something</a>上面代码给一个链接添加了三个事件onmouseover鼠标移到链接上的时候显示提示信息onmousemove鼠标在链接上移动的时候提示信息跟随onmouseout鼠标移开链接时隐藏提示信息虽然上面的代码能够实现功能但不是很好因为需要为每个链接一一添加事件而实际开发中一个页面就会有很多链接这样就不方便比较好的方法是下面代码这样实现 function prepare（id） { if（id==null） links=documentgetElementsByTagName（a） else links=documentgetElementById（id）getElementsByTagName（a） for（i=i<linkslengthi++）{ attachEvent（links[i]） } } function attachEvent（link） { if（！link） return linkattachEvent（onmouseovershowTooltip） linkattachEvent（onmousemovelocate） linkattachEvent（onmouseouthideTooltip） } 完成上面的三部简单的自定义提示信息就完成啦一些特别的提示信息是对创建的层做了特殊处理如我们经常看到圆角提示信息是在层上添加了背景图片 |
