100分悬赏：怎么样用javascript实现这种提示效果？不是title能解决的！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>:::::::::::tree::::::::::::::</title>
</head>
<style>
TABLE {
COLOR: #000000; FONT: 10pt "宋体"
}
TD {
COLOR: #000000; FONT: 10pt "宋体"
}
.menuUp
{
background-color: #698FD8;
}
</style>
<body><table border='0' cellpadding='0' cellspacing='0'>
<tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;双流县城市建设局</td></tr></table>
<tr id='item7'><td>
<table border='0' cellpadding='0' cellspacing='0'>
<tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;办公室</td></tr></table>
<tr id='item2'><td>
<table border='0' cellpadding='0' cellspacing='0'>
<tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;测试</td></tr></table>
</table>
</td></tr><tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;财务科</td></tr></table>
</table>
</td></tr><tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;下属部门</td></tr></table>
<tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;0053</td></tr></table>
<tr><td><table  border='0' cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td><td  onMouseover=javascript:this.className='menuUp' onMouseOut=javascript:this.className=''> &nbsp;0054</td></tr></table>
<tr id='item38'><td>&nbsp;
</td>
</tr></table>
</body>
</html>

解决方案 »

  1.   

    不是css样式，他使用的似乎是层，但是我不知道该怎么写:(
      

  2.   

    这个效果包含两个文件temp.htm和xc.jstemp.htm
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 2</title>
    <script language="jscript.encode" src="xc.js"></script>
    </head>
    <body>
    <font class="xc_phrase" onmouseover="xc_show('adequately<br>adv. sufficiently 充分地')" onmouseout="xc_hide()">adequately</font>
    </body>
    </html>xc.js
    var nowdate=new Date();
    var nowyear=nowdate.getYear();function xc_show(text)  //显示链接的说明
    {
    text=text.replace("Kingsoft Phonetic Plain","'Kingsoft Phonetic Plain'");
    var xc_screen_width=window.screen.width;
      if (document.all&&document.readyState=="complete")//针对IE
      {
       //显示跑马灯,内容就是提示框的内容
       document.all.xc_point.innerHTML="<div vAlign=center>"+text+"</div>";
       document.all.xc_point.style.pixelLeft=event.clientX+document.body.scrollLeft;
       document.all.xc_point.style.pixelTop=event.clientY+document.body.scrollTop+20;
      
       if ((xc_screen_width-event.clientX)<200)   
       {
       document.all.xc_point.style.pixelLeft=event.clientX-180;
       }
       document.all.xc_point.style.visibility="visible";
      }  
    }document.write(
    "<div id=\"xc_point\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #ff9999; background-color:#FFFFFF; width: 180px; Height: 20px; left:77;top: 96px;z-index:10;\"></div>");
    function xc_hide()  //隐藏链接的说明
    {if (document.all)
      document.all.xc_point.style.visibility="hidden";
    }
      

  3.   

    我希望大家在回答前真的看过了http://bt.btchina.net/btbbs/的效果，并且至少大致浏览了以下它的实现方法。
      

  4.   

    参考页面
    http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=277
      

  5.   

    看看这个是不是想要的：<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>自定义Alt-www.51windows.net－www.51windows.Net</title>
    </head>
    <body>
    <span alt="好孩子^O^">过来</span><br><br>
    <span alt="好孩子^O^" altbg="red" altcolor=yellow altborder="yellow">过来</span><br><br>
    <span alt="好孩子^O^" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">过来</span><br><br>
    <span alt="好孩子^O^" altbg="green" altcolor=yellow altborder="darkgreen">过来</span><br><br>
    <span alt="好孩子^O^" altbg="#000000" altcolor="#FFFFFF" altborder="#000000">过来</span>
    <div style="filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50,finishOpacity=0);display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id=altlayer></div>
    <script>
    document.body.onmousemove=quickalt;
    document.body.onmouseover=getalt;
    document.body.onmouseout=restorealt;
    var tempalt='';function getalt()
    {
    if(event.srcElement.alt && (event.srcElement.alt!='' || (event.srcElement.alt=='' && tempalt!='')))
    {
    altlayer.style.left=event.x;
    altlayer.style.top=event.y+20;
    altlayer.style.display='';
    tempalt=event.srcElement.alt;
    tempbg=event.srcElement.altbg;
    tempcolor=event.srcElement.altcolor;
    tempborder=event.srcElement.altborder;
    event.srcElement.alt='';
    altlayer.innerText=tempalt;
    if (typeof(tempbg)!="undefined"){altlayer.style.background=tempbg}else{altlayer.style.background="#FFFFCC"}
    if (typeof(tempcolor)!="undefined"){altlayer.style.color=tempcolor}else{altlayer.style.color=tempcolor="#000000"}
    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.alt=tempalt;
    tempalt='';
    altlayer.style.display='none';
    }
    </script>
    </body>
    </html>
      

  6.   

    var myHint = THints==null?null:new THints (HINTS_CFG, HINTS_ITEMS);
    如果写成这样你应该知道了吧..
    var myHint = (THints==null)?null:new THints (HINTS_CFG, HINTS_ITEMS);
    这句话的意思就是当THints为空的话,myHint=null
    否则等于THints (HINTS_CFG, HINTS_ITEMS);
      

  7.   

    我不是这个意思,我在整个页面上都没有找到THints这个对象,也不知道这是个自定义对象还是内置对象.
      

  8.   

    其实你可以用javascript+层+数据库.来实现.
    javascript用来控制层的的显示效果...
      

  9.   

    var myHint = THints==null?null:new THints (HINTS_CFG, HINTS_ITEMS);
    当THints如果不为空，则创建一个THints的对象，并把这个对象赋给myHint,否则myHint的值为空!
      

  10.   

    看看这个例子的效果怎么样：
    <html>
    <head>
    <title>特殊效果的ToolTip</title>
    <style>
    body{
    background-color:ThreeDFace;
    margin:10;
    padding:10;
    overflow:hidden;
    }
    </style><script language="JavaScript">
    /* 特殊效果的ToolTip ***************************************************************************/
    ToolTipGlobal={
    id:0,
    getId:function(o){ this.all[this.all.length]=o;return this.id++},
    all:[]
    };
    function ToolTip(defaultOpacity,font,BGround,color,border,offsetOn,offsetOff)
    {
    this.id = ToolTipGlobal.getId(this);
    this.defaultOpacity = defaultOpacity;
    this.opacity = defaultOpacity;
    this.font = font;
    this.BGround = BGround;
    this.border = border;
    this.timerOn = null;
    this.timerOff = null;
    this.offsetOn = offsetOn;
    this.offsetOff = offsetOff;
    this.control = null;
    var o = this;
    window.attachEvent("onload",function(){ o.setup();});
    }ToolTip.prototype.fadeOn = function()
    {
    window.clearTimeout(this.timerOff);
    this.timerOn = window.setTimeout("ToolTipGlobal.all["+this.id+"].fade(1)",this.offsetOn[1]);
    }ToolTip.prototype.fadeOff = function()
    {
    window.clearTimeout(this.timerOn);
    this.timerOff = window.setTimeout("ToolTipGlobal.all["+this.id+"].fade(0)",this.offsetOff[1]);
    }ToolTip.prototype.setOpacity = function(x)
    {
    this.opacity = x;
    this.control.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+ x +") progid:DXImageTransform.Microsoft.Shadow(color='#FF444444', Direction=135, Strength=3)";
    }ToolTip.prototype.fade = function(x)
    {
    var o = this.control;
    var ox = this.opacity;
    if (x)
    {
    if (ox + this.offsetOn[0] <100)
    {
    this.setOpacity(ox+this.offsetOn[0]);
    this.fadeOn();
    }
    else
    {
    this.setOpacity(100);
    }
    }
    else 
    {
    if (ox - this.offsetOff[0]>this.defaultOpacity)
    {
    this.setOpacity(ox - this.offsetOn[0]);
    this.fadeOff();
    }
    else
    {
    this.setOpacity(this.defaultOpacity);
    o.style.visibility = "hidden"
    }
    }
    }ToolTip.prototype.setup = function()
    {
    var o = document.createElement("div");
    var oThis = this;
    with(o.style)
    {
    position = "absolute";
    top = "0px";
    left = "0px";
    font = this.font;
    zIndex = 99999;
    background = this.BGround;
    color = this.color;
    border = this.border;
    padding = "2px 4px";
    visibility = "hidden";
    }
    document.body.appendChild(o);
    this.control = o;
    document.attachEvent("onmouseover",function(){
    var e = window.event.srcElement;
    if (e.title != "")
    {
    e.tip = e.title;
    e.title = "";
    }
    if (typeof(e.tip) != "undefined" && e.tip != null)
    {
    o.innerHTML = e.tip;
    oThis.setOpacity(oThis.defaultOpacity);
    var x,y,docheight,docwidth,dh,dw;
    x = window.event.clientX + document.body.scrollLeft;
    y = window.event.clientY + document.body.scrollTop;
    docheight = document.body.clientHeight;
    docwidth  = document.body.clientWidth;
    dh = (o.offsetHeight+y) - docheight;
    dw = (o.offsetWidth+x)  - docwidth;
    if(dw>0)
    {
    o.style.left = (x - o.offsetWidth) + document.body.scrollLeft - 5 ;
    }
    else
    {
    o.style.left = x + document.body.scrollLeft + 15;
    }
    if(dh>0)
    {
    o.style.top = (y - o.offsetHeight) + document.body.scrollTop - 5 ;
    }
    else
    {
    o.style.top  = y + document.body.scrollLeft + 15 ;
    }
    o.style.visibility = "visible";
    oThis.fadeOn();
    }
    });
    document.attachEvent("onmouseout",function(){
    var e = window.event.srcElement;
    if (typeof(e.tip) != "undefined" && e.tip != null)
    {
    oThis.fadeOff();
    }
    });
    };
    var tooltip =new ToolTip(20,"9pt Arial 宋体","#d2e9ff","#000000","1px solid #000000",[8,20],[8,20]);
    </script>
    </head>
    <body ><a title="<font color=red>sand1602 (沙)问</font>：一个项目，想实现鼠标放在上面出现提示的效果。<br>本来用title属性，但是他有太多毛病，比如很短时间内就消失了。<br><br><font color=green>那你看看这个效果是不是很符合你的要求？</font><br><br><font color=#cccccc>2004-09-19</font>" href="#">这是一个带有特殊效果ToolTip的例子</a>
    <br>
    <input name="TextBox1" type="text" id="TextBox1" title="我在网上看到有人实现了这种效果：http://bt.btchina.net/btbbs/ 但是我的javascript水平太差，看了半天弄不懂，特别是一句 var myHint = THints==null?null:new THints (HINTS_CFG, HINTS_ITEMS); 恁是看不明白 高手请帮个忙，先谢了！"><br />                  </body>
    </html>
      

  11.   

    DHTML方法，像MSDN上那种淡黄色背景的帮助或者说明，可以运行一个看看效果，挺不错的
    不用自己用层来模拟了
    <HTML>
    <HEAD>
    <TITLE>Popup Example</TITLE>
    <SCRIPT LANGUAGE="JScript">
    var oPopup = window.createPopup();
    function ButtonClick()
    {
    var oPopBody = oPopup.document.body;
    oPopBody.style.backgroundColor = "lightyellow";
    oPopBody.style.border = "solid black 1px";
    oPopBody.innerHTML = "Click outside <B>popup</B> to close.";
    oPopup.show(100, 100, 180, 25, document.body);
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <BUTTON onclick="ButtonClick()">Click Me!</BUTTON>
    </BODY>
    </HTML>