鼠标旁边的提示信息JS代码如何写

【实例名称】

鼠标旁边的提示信息JS代码

【实例描述】

在大型门户网站中，为了让用户可以全面地了解网站的内容，通常需要简化很多按钮，但为了让用户可以了解按钮的用途，当鼠标指向按钮时，会出现提示信息详细介绍按钮的功能。本例介绍如何实现鼠标旁边的提示信息。

【实例代码】

 
<script Language="javascript"> 
//内部变量定义
tPopWait=50; 
tPopShow=4000;
showPopStep=15; 
popOpacity=80; 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
//动态显示提示信息，注意此处定义了样式和层
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText {  background-color: #F8F8F5;
color:#000000; border: 1px #000000 solid;font-color: 
font-size: 12px; padding-right: 4px; padding-left: 4px; 
height: 20px; padding-top: 2px; padding-bottom: 2px; 
filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:
absolute;z-index:1000;' class='cPopText'></div>"); 
//显示提示信息的方法
function showPopupText()
{ 
    var o=event.srcElement; 
//获取鼠标指向的链接或按钮
    MouseX=event.x; 
    MouseY=event.y; 
    if(o.alt!=null && o.alt!="")
    {o.dypop=o.alt;o.alt=""}; 
    if(o.title!=null && o.title!="")
    {o.dypop=o.title;o.title=""}; 
    if(o.dypop!=sPop)
    { 
        sPop=o.dypop;   
//设置提示信息的内容-从控件的title属性获得
        clearTimeout(curShow); 
        clearTimeout(tFadeOut); 
        clearTimeout(tFadeIn); 
        clearTimeout(tFadeWaiting); 
        if(sPop==null || sPop=="") 
        { 
            dypopLayer.innerHTML=""; 
            dypopLayer.style.filter="Alpha()"; 
            dypopLayer.filters.Alpha.opacity=0; 
        } 
        else 
        { 
            if(o.dyclass!=null)
            popStyle=o.dyclass  
            else popStyle="cPopText"; 
            curShow=setTimeout("showIt()",tPopWait); 
        } 
   } 
} 
//定义显示的位置
function showIt()
{ 
    dypopLayer.className=popStyle; 
    dypopLayer.innerHTML=sPop; 
    popWidth=dypopLayer.clientWidth; 
    popHeight=dypopLayer.clientHeight; 
    if(MouseX+12+popWidth>document.body.clientWidth) 
popLeftAdjust=-popWidth-24 
    else popLeftAdjust=0; 
    if(MouseY+12+popHeight>document.body.clientHeight) 
popTopAdjust=-popHeight-24 
    else popTopAdjust=0; 
    dypopLayer.style.left=MouseX+12+document.body.
scrollLeft+popLeftAdjust; 
    dypopLayer.style.top=MouseY+12+document.body.
scrollTop+popTopAdjust; 
    dypopLayer.style.filter="Alpha(Opacity=0)"; 
    fadeOut(); 
} 
//定义显示或隐藏提示层
function fadeOut()
{ 
    if(dypopLayer.filters.Alpha.opacity<popOpacity)
    { 
        dypopLayer.filters.Alpha.opacity+=showPopStep; 
        tFadeOut=setTimeout("fadeOut()",1); 
    } 
    else
    { 
        dypopLayer.filters.Alpha.opacity=popOpacity; 
        tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
    } 
} 
function fadeIn()
{ 
    if(dypopLayer.filters.Alpha.opacity>0) 
    { 
        dypopLayer.filters.Alpha.opacity -= 1; 
        tFadeIn=setTimeout("fadeIn()",1); 
    } 
} 
document.onmouseover=showPopupText; 
需要在body中添加一个连接，用来调用并实现提示效果，代码如下所示，注意要指定连接的title属性，它是提示信息的来源。
<a href="http://www.google.com" title="我最喜爱的搜索">搜索</a>
 

【运行效果】

【难点剖析】

本例中的重点是div层和CSS特效的应用。

【源码下载】

本实例JS代码下载

……