tip的问题,请大家帮忙看下

<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
  <td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
     onmouseout="document.all.pop.style.display='none'">
  </td></tr>
</table><div><div id=pop style="
  position: absolute;
  width: 120;
  height: 30;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>
图层文字</div><script language=javascript>
function cc(tt)
{
  var hint = tt.getAttribute("alt");
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  e.style.left = l + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerHTML = hint; //author: meizz
}
</script>
</body></html>

解决方案 »

  1.   

    meizz(梅花雪)
    你好这个tip的属性在外面是怎么定义呢,从this传过来和我的要求有点不符合
      

  2.   

    var e  = document.getElementById("pop");  e.style.top  = y + 6; //层的 Y 坐标
      e.style.left = x + 1;      //层的 X 坐标
      e.style.display = "block"; //层显示
      e.innerHTML = Info; 我改成这样了,x和y分辨为鼠标的位置,info是自己写的字符串.但是tip会被原来的图层挡住,请问怎么办呢
      

  3.   

    <style type="text/css">
    body{font-size:12px;color:#000000}
    td{font-size:12px;color:#000000}
    a:link{font-size:12px;color:#000000}
    </style><script language="javascript">
    var pltsPop=null;
    var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
    var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适
    var pltsTitle="";
    document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
    function pltsinits()
    {
     document.onmouseover = plts;
     document.onmousemove = moveToMouseLoc;
    }
    function plts()
    { var o=event.srcElement;
     if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
     if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
     pltsPop=o.dypop;
     if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
     {
     pltsTipLayer.style.left=-1000;
     pltsTipLayer.style.display='';
     var Msg=pltsPop.replace(/\n/g,"<br>");
     Msg=Msg.replace(/\0x13/g,"<br>");
     var re=/\{(.[^\{]*)\}/ig;
     if(!re.test(Msg))pltsTitle="『水木设计联盟』";
     else{
     re=/\{(.[^\{]*)\}(.*)/ig;
     pltsTitle=Msg.replace(re,"$1")+" ";
     re=/\{(.[^\{]*)\}/ig;
     Msg=Msg.replace(re,"");
     Msg=Msg.replace("<br>","");}
     var content =
     '<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+
     '<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+
     '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+
     '<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+
     '</table></td></tr></table>';
     pltsTipLayer.innerHTML=content;
     toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
     moveToMouseLoc();
     return true;
     }
     else
     {
     pltsTipLayer.innerHTML='';
     pltsTipLayer.style.display='none';
     return true;
     }
    }function moveToMouseLoc()
    {
     if(pltsTipLayer.innerHTML=='')return true;
     var MouseX=event.x;
     var MouseY=event.y;
     var popHeight=pltsTipLayer.clientHeight;
     var popWidth=pltsTipLayer.clientWidth;
     if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
     {
     popTopAdjust=-popHeight-pltsoffsetY*1.5;
     pltsPoptop.style.display="none";
     pltsPopbot.style.display="";
     }
     else
     {
     popTopAdjust=0;
     pltsPoptop.style.display="";
     pltsPopbot.style.display="none";
     }
     if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
     {
     popLeftAdjust=-popWidth-pltsoffsetX*2;
     topleft.style.display="none";
     botleft.style.display="none";
     topright.style.display="";
     botright.style.display="";
     }
     else
     {
     popLeftAdjust=0;
     topleft.style.display="";
     botleft.style.display="";
     topright.style.display="none";
     botright.style.display="none";
     }
     pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
     pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
     return true;
    }
    pltsinits();</script>
    <a href="test.htm" title="要为成功找方法，不为失败找借口">一个很酷的鼠标悬停特效</a>
      

  4.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>自定义title - 5iuu.com</title>
    </head>
    <body>
    <p><B>自定义title</B>(IE)：把鼠标放在下面的文字上查看效果</p>
    <span title="Javascript" title="">默认效果</span><br><br>
    <span title="<marquee style='width:100px;'>www.5iuu.com</marquee>" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕</span><br><br>
    <span title="<img src='http://www.85815.com/logo/logo_02.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">图片</span><br><br>
    <span title="<i style='font-size:24pt;font-family:verdana;'>www.5iuu.com</i>" altbg="green" altcolor="yellow" altborder="darkgreen">大字体</span><br><br>
    <div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id=altlayer></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    document.body.onmousemove=quickalt;
    document.body.onmouseover=getalt;
    document.body.onmouseout=restorealt;
    var tempalt='';function getalt(){
     if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && tempalt!=''))){
     altlayer.style.left=event.x;
     altlayer.style.top=event.y+20;
     altlayer.style.display='';
     tempalt=event.srcElement.title;
     tempbg=event.srcElement.altbg;
     tempcolor=event.srcElement.altcolor;
     tempborder=event.srcElement.altborder;
     event.srcElement.title='';
     altlayer.innerHTML=tempalt;
     if (typeof(tempbg)!="undefined"){altlayer.style.background=tempbg}else{altlayer.style.background="infobackground"}
     if (typeof(tempcolor)!="undefined"){altlayer.style.color=tempcolor}else{altlayer.style.color=tempcolor="infotext"}
     if (typeof(tempborder)!="undefined"){altlayer.style.border='1px solid '+tempborder;}else{altlayer.style.border='1px solid #000000';}
     }
    }
    function quickalt(){
     if(altlayer.style.display==''){
     altlayer.style.left=event.x;
     altlayer.style.top=event.y+10;
     }
    }
    function restorealt(){
     event.srcElement.title=tempalt;
     tempalt='';
     altlayer.style.display='none';
    }
    //-->
    </SCRIPT>
    </body>
    </html>
      

  5.   

    AppleBBS(Dicky) 你好你这个鼠标的位置哪是在哪控制的?不好意思我看的不是很懂
      

  6.   

    AppleBBS(Dicky) 你这个效果和我说的还是有很大差别的啊,你可以去http://web.mapabc.com/localsearch/thememap.jsp看看
      

  7.   

    现在最主要的问题就是tip总是被地图挡住了,大家帮帮忙啊