一个页面上往往有很多链接、按钮,如果没有任何提示信息,会让人很迷茫。虽然IE也带提示功能,只要给title属性赋值,如下代码
<a href="#" title="this a test">自带的提示</a>
这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明显,所以自定义的提示信息是很有必要的。
如何定制提示信息,说起来很简单,先画出提示信息层,然后定位到目标对象。下面把实现分三部来说明:
1)绘制信息层
    有两种方式,一种是静态,把层的html代码写在文档中,另外一种是动态,运用javascript脚本动态的创建层。静态方式简单,不灵活,动态的灵活,但比较困难,需要熟悉脚本和Dom结构,下面的代码是动态方式创建提示层
function createDivTooltip()
{

        
var divTips = document.createElement('div');//create div element
        divTips.id='tooltip';
        divTips.style.display
='none'//invisible    
        document.body.appendChild(divTips);
}
2)定位信息层
function locate(e)
{ e=e||window.event;   
    
var divTips = document.getElementById('tooltip');
    
var mousePos=getMousePosition(e);//get the coordinate of the mouse    
    divTips.style.top=mousePos.top-12+"px";
    divTips.style.left
=mousePos.left-8+"px";
         
}
关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标
3)附加事件
<a href="" title="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=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i<links.length;i++){
    attachEvent(links[i]);
    }

}

function attachEvent(link)
{
if(!link) return;
link.attachEvent(
"onmouseover",showTooltip);
link.attachEvent(
"onmousemove",locate);
link.attachEvent(
"onmouseout",hideTooltip);
}
完成上面的三部简单的自定义提示信息就完成啦,一些特别的提示信息是对创建的层做了特殊处理,如我们经常看到圆角提示信息,是在层上添加了背景图片。
提供一个示例下载供大家参考,希望有帮助<<示例下载>>
posted on 2008-01-26 18:04  Agan@CN  阅读(3572)  评论(25编辑  收藏  举报