如何为多个链接添加提示框(图)????????????? 急!!!!

用 onmoseover与onmoseout来实现，把那个框做成一个隐含的区，当书标移上去时，就把那个隐含的区进行显示，如果移开时把div区的属性改成hidden就可以了，
你要的框可以通过一个button 改改css来实现。

解决方案 »

  1.   

    <html>
    <head>
    <title>
    </title>
    </head>
    <body>
    <script language="javascript">
    function lookatme()
    {
    document.all.lookat.innerHTML='<input type="button" name="button1" value="lookat this this will..."  style="border:1px window-inset #000000">';
    }function nolook()
    {
    document.all.lookat.innerHTML="";
    }</script>
    <form name="form1">
    <a href="#" onmouseover="javascript:lookatme()" onmouseout="javascript:nolook()">go</a>
    <div background="#99CCFF">
    <font id="lookat">&nbsp;</font>
    </div></div>
    </form>
    </body>
    </html>
      

  2.   


    你的有点问题,如果我再添加多一个链接,但提示框总在弟一个链接上<center>
    <a href="#"  onmouseover="javascript:lookatme();" onmouseout="javascript:nolook()">go</a>
    </center>
    <div background="#99CCFF" id="d1" >
    <font id="lookat">&nbsp;</font></div>
      

  3.   

    直接用title实现的。<a href = "http://www.baidu.com" title="百度中国">baidu</a>
    用层实现的。
    你可以自己做出很多效果啊。demo.htm<script src="poptext.js"></script>
    <table>
    <tr><td  title="灰豆宝宝.net">wanghr100</td></tr>
    <tr><td  title="灰豆大仙.net">wanghr100</td></tr>
    </table>poptext.js//***********默认设置定义.*********************
    tPopWait=50;//停留tWait豪秒后显示提示。
    tPopShow=5000;//显示tShow豪秒后关闭提示
    showPopStep=20;
    popOpacity=70;//***************内部变量定义*****************
    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;
    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="<font color=red><b>"+sPop+"</b></font>";
    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;