鼠标滑过出现提示层效果 js代码

把下面的代码保存为文件，再在目录下放一张名为200708171844190.gif图片就可以了，而且在面页滚动时可以准确显示
文件代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 鼠标滑过出现提示层效果 js代码 javascript </ title >
< link  href ="style.css"  rel ="stylesheet"  type ="text/css"   />
< script  type ="text/javascript" > ...
    function enableTooltips(id)
    ...{
       
        var links,i,h;
        if(!document.getElementById || !document.getElementsByTagName)
             return;
        AddCss();
        h=document.createElement("span");
        h.id="btc";
        h.setAttribute("id","btc");
        h.style.position="absolute";
        document.getElementsByTagName("body")[0].appendChild(h);
        if(id==null)
             links=document.getElementsByTagName("a");
        else 
            links=document.getElementById(id).getElementsByTagName("a");
        for(i=0;i<links.length;i++)
        ...{
            Prepare(links[i]);
        }
        
    }
    function Prepare(el)
    ...{
        var tooltip,t,b,s,l;
        t=el.getAttribute("title");
        if(t==null || t.length==0)
             t="link:";
        el.removeAttribute("title");
        tooltip=CreateEl("span","tooltip");
        s=CreateEl("span","top");
        s.appendChild(document.createTextNode(t));
        tooltip.appendChild(s);
        b=CreateEl("b","bottom");
        l=el.getAttribute("href");
        if(l.length>30)
             l=l.substr(0,27)+"...";
        b.appendChild(document.createTextNode(l));
        tooltip.appendChild(b);
        setOpacity(tooltip);
        el.tooltip=tooltip;
        el.onmouseover=showTooltip;
        el.onmouseout=hideTooltip;
        el.onmousemove=Locate;
    }
    function showTooltip(e)
    ...{
        document.getElementById("btc").appendChild(this.tooltip);      
    }
    function hideTooltip(e)
    ...{
        
        var d=document.getElementById("btc");
        if(d.childNodes.length>0)
        d.removeChild(d.firstChild);
    
    }
    function setOpacity(el)
    ...{
        el.style.filter="alpha(opacity:95)";
        el.style.KHTMLOpacity="0.95";
        el.style.MozOpacity="0.95";
        el.style.opacity="0.95";
    }
    function CreateEl(t,c)
    ...{
        var x=document.createElement(t);
        x.className=c;
        x.style.display="block";
        return(x);
    }
    function AddCss()
    ...{
        var l=CreateEl("link");
        l.setAttribute("type","text/css");
        l.setAttribute("rel","stylesheet");
        l.setAttribute("href","?.css");
        l.setAttribute("media","screen");
        document.getElementsByTagName("head")[0].appendChild(l);
    }
    function Locate(e)
    ...{
        if(document.all)
             e=event;
        var posx=0,posy=0;
        if(e==null) 
        ...{    
             e=window.event;             
             posx=e.clientX;
             posy=e.clientY;
        }
        else if(e.clientX || e.clientY)
        ...{
            var d=document.getElementById("btc").firstChild;
            //alert(d.offsetTop);
            if(document.documentElement.scrollTop)
            ...{
                posx=e.clientX+document.documentElement.scrollLeft;
                posy=e.clientY+document.documentElement.scrollTop;
            }
            else
            ...{
                posx=e.clientX+document.body.scrollLeft;
                posy=e.clientY+document.body.scrollTop;
            }
        }
        document.getElementById("btc").style.top=(posy+2)+"px";
        document.getElementById("btc").style.left=(posx-30)+"px";
    }
</ script >
< script  type ="text/javascript" > ...
window.onload=function()...{enableTooltips();};
</ script >

</ head >
< body  style ="text-align:center" >     

       < a  id ="text"  href ="http://www.51flash.cn"  title ="this is the title"   > 51flash.cn </ a >

</ body >
</ html >

样式文件

.tooltip
{...} {
    width: 200px; color:#000;
    font:lighter 11px/1.3 Arial,sans-serif;
    text-decoration:none;text-align:center
}
.tooltip span.top
{...} {
    padding: 30px 8px 0;
     background: url(200708171844190.gif) no-repeat top
 }
 .tooltip b.bottom
  {...} {
    padding:3px 8px 15px;color: #548912;
    background: url(200708171844190.gif) no-repeat bottom
 }