[求]这个效果怎么实现

<html>
<head>
<script Language="JavaScript">
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
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=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;
</script>
</head>
<body>
<a href="url" title="这是提示">tip</a>
</body>
</html>网上帮你找个例子，自己看看吧~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

5楼的大哥, 不行阿.FF下出错啊:event is not defined
可以阿，直接复制到文本里，改个后缀名html，打开就可以了。我都测试过了
FF下不行的.
IE下我看了可以是可以但不只是要TIP效果.
TIP效果的话很简单.现在TIP效果我知道怎么做的.我要弹出一个层  层里面还有连接. 点击连接弹出第二个层(第一个层消失)注: 第二个层如果不点击关闭所有TD的第一个层总不出来.并且保证页面上始终只有一个层出于显示状态的. 麻烦大家再看看
以下代码我大致写了一下，根据你自己的实际情况稍加改动就可以。
<script language="javascript">
function clickit(x)
    {
   document.getElementById("showtable"+x).style.visibility="visible";
    }
function clickout(x)
    {
   document.getElementById("showtable"+x).style.visibility="hidden";
    }</script>
<%
set rs_job=server.createobject("ADODB.Recordset")
sql_job="select * from jobname order by addtime desc"
rs_job.open sql_job,conn,1,3
n=1
do while not rs_job
%>
<a href="DDD.asp" target="_blank" id="pictureactive<%=n%>" onMouseOver="clickit(<%=n%>)" onMouseOut="clickout(<%=n%>)"><%=rs_job("jobname")%></a>
<div id="showtable<%=n%>" style="visibility: hidden; width:175px;position:absolute;margin-top:87px;margin-left:-98px;"  align="center" class="dv55" >
   <div align="left"><span class="style124"> <%=rs_job("jobname")%>(<%=rs_job("jobid")%>)<br>
                             <%=rs_job("weburl")%></span>
   </div>
  </div>
<%
rs_job.movenext
n=n+1
loop
rs_job.close
set rs_job=nothing %>
忘了加一个样式，可以自行调整的。
<style type="text/css">
</style>
10楼的大哥先谢!ASP的没法运行看了JS 可以实现弹出这不是问题所在
我那个数据库是我随便用了一个表，你可以根据实际情况自己变化的。
把其中的</a>移到最外面的div层外，我想这样应该就可以。<a href="DDD.asp" target="_blank" id="pictureactive<%=n%>" onMouseOver="clickit(<%=n%>)" onMouseOut="clickout(<%=n%>)"><%=rs_job("jobname")%>
<div id="showtable<%=n%>" style="visibility: hidden; width:175px;position:absolute;margin-top:87px;margin-left:-98px;"  align="center" class="dv55" >
   <div align="left"><span class="style124"> <%=rs_job("jobname")%>(<%=rs_job("jobid")%>)<br>
                             <%=rs_job("weburl")%></span>
   </div>
  </div>
</a>
555555555555麻烦看看
http://shenghuo.google.cn/shenghuo/search?a_y0=9&a_n0=%E5%B7%A5%E4%BD%9C&q=%E8%A1%8C%E6%94%BF%E5%8A%A9%E7%90%86&hl=zh-CN&gl=CN&view=Table&gdci=true&a_n1=%E5%9F%8E%E5%B8%82&a_y1=1&a_o1=0&a_v1=%E5%8D%97%E6%98%8C为什么GOOGLE可以啊  他是怎么作的啊
google那个是整个单元格一个动作，不是你说的分别有动作
<td id="sprrt2">
  <div style="float: left; vertical-align: middle; margin-right: 3px;">
  </div>
  <a target="_blank" href="http://www.jiangxirc.com/dl/person/jobinfos.asp?companyid=22454645&jobid=370383" onclick="CALL('sh.ClickTracker.trackPrimaryResultLink', '2', this)"><b>行政</b><b>助理</b></a>
  <span class="WebSource"> -
  <a id="sprrs2" target="_blank" href="http://www.jiangxirc.com" onclick="CALL('sh.ClickTracker.trackResultSource', '2', this)">jiangxirc.com</a>
  </span>
  </td>
自己看他的这个，有2个鼠标经过的事件吗？
是只有一个动作的.我在TD上加动作但是鼠标到连接上去再下来被视为再次onmouseover了这样就是进TD执行一次OVER  进<a>执行一次 out 执行一次over  鼠标从<a>下来会再执行一此over能不能不让<a></a>执行over事件啊  .....
麻烦您  能不能抽点时间帮我写一下啊.对了我还要根据鼠标进入<td>的X坐标来确定弹出层的X坐标  我用的是 clientX
我换个方式问吧希望是我提问的方式错了大家都不明白我说什么。
刚开始学，代码我都知道写的不好哈哈，大家包含！。。希望大家抽点时间帮我在现有的基础上改下。
要求：1.鼠标进入<td>第一个弹出层显示（他的X坐标是根据鼠标进入<td>的X坐标决定的）。
         注：无论鼠标在该<td>内如何移动，第一个弹出层位置不变。不能出现闪的情况。
      2.鼠标点击第一个层内的链接后，第二个层出现，第一个层消失，在第二个层处于显示的状态下。其他所有onmouseover不能触发，也就是任何<td>内的第一个层不能出来。大概要求就这点。希望能解决，非常感谢！！！！
<script type="text/javascript">function $(s)
{
    return document.getElementById(s);
}
function show_coords(event,obj)
{
x=event.clientX; //X???
y=event.clientY; //Y???
var zp = 'zp'+obj;
var sms = 'sms'+obj;
document.getElementById(zp).style.left = x+10+'px';
document.getElementById(sms).style.left = x+10+'px';
//document.getElementById(zp).style.top  = y+200+'px';
}function preview(z,v,n)
{
var a = 'zp'+n;
var b = 'sms'+n;
if(z==1)
{
if(v == 1)
{
$(a).style.display='block';
}
else if(v == 0)
{
$(a).style.display='none';
}
}
else if(z==2)
{

if(v == 1)
{
$(b).style.display='block';
$(a).style.display='none';
}
else if(v == 0)
{
$(b).style.display='none';
$(a).style.display='none';
}
}
else if(z==3)
{
if(v == 1)
{
$(a).style.display='none';
$(b).style.display='block';
}
else if(v == 0)
{
$(b).style.display='none';
$(a).style.display='none';
}
}
}</script>
<style type="text/css">
.mytable { width:250px; height:50px;}
.bg {border:1px solid #c0c0c0}
</style><table>
<tr>
<td class="mytable" onmousemove="preview('1','1','1')" onmouseover="preview('1','1','1');show_coords(event,'1')" onmouseout="preview('1','0','1')" style="border:1px solid #ff0000;width:80px"><a href="#">职位名称</a></td>
<td>121212</td>
<td>121212</td>
<td>121212</td>
</tr>
<tr>
<td onmousemove="preview('1','1','1')" class="bg" id="zp1"  name="zp" style="display:none;position:absolute;left:80px;">
<a href="" onmousedown="preview('3','1','1')">第一个弹出层</a>
</td>
<td class="bg" id="sms1" style="display:none;position:absolute;left:80px;">
<a href="" >第二个弹出层</a>
</td>
</tr>
<tr>
<td class="mytable" onmousemove="preview('1','1','2');return false;" onmouseover="preview('1','1','2');show_coords(event,'2')" onmouseout="preview('1','0','2')" style="border:1px solid #ff0000;width:80px">
<a href="#">职位名称</a>
</td>
<td>121212</td>
<td>121212</td>
<td>121212</td>
</tr>
<tr>
<td onmousemove="preview('1','1','2')" class="bg" id="zp2"  name="zp" style="display:none;position:absolute;left:80px;">
<a href="" onmousedown="preview('3','1','2')">第一个弹出层</a>
</td>
<td class="bg" id="sms2" style="display:none;position:absolute;left:80px;">
<a href="">第二个弹出层</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td onmousemove="aaa()" onmouseout="bbb()">sfsfsfsfsfsdfsdfsd<a href="#">aaa</a></td>
    <td> </td>
  </tr>
</table>
<div id="bb" style="display:none">aaaa</div><div style="display:block">bbb</div>
<script>
function aaa(){
document.getElementById('bb').style.display="block";
}
function bbb(){
document.getElementById('bb').style.display="none";
}
</script>我很简单的测试了下，只要鼠标不离开<td onmousemove="aaa()" onmouseout="bbb()">sfsfsfsfsfsdfsdfsd<a href="#">aaa</a></td>这个单元格，他是不会触发bbb()的
可能是我加了鼠标坐标的原故吧.本来进取的时候第一个弹出层是一个位置但是在<td>内只要从<a>上下来或者上去弹出层的位置就会重新定位
怎么办能帮我把上面的代码改下吗
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="aa" onmousemove="aaa(1,0,0)" onmouseover="aaa(0,0,0)">sfsfsfsfsfsdfsdfsd<a href="#">aaa</a></td>
    <td> </td>
  </tr>
</table>
<div id="bb" style="display:none" onclick="aaa(0,1,0)">aaaa</div><div id="cc" style="display:none" onclick="aaa(0,0,1)">bbb</div>
<script>
var flag=false;
function aaa(a,b,c){
if(a==1){
document.getElementById('bb').style.display="block";
}
if(b==1){
document.getElementById('cc').style.display="block";
document.getElementById('bb').style.display="none";
document.getElementById('aa').onmousemove=function(){aaa(0,1,0)}
}
if(c==1){
document.getElementById('cc').style.display="none";
document.getElementById('bb').style.display="none";
document.getElementById('aa').onmousemove=function(){aaa(1,0,0)}
}
if(a==0){
document.getElementById('bb').style.display="none";
}
}</script>
给你看个例子
看了的.不加clientX是好的(我原来的也是),加了之后也不顺利.
进<td>是一个坐标,划到里面的联接上再下来又是一个坐标不知道这个怎么解决.
还有  我希望bbb弹出来之后, 鼠标经过<td>的时候aaa不能再出来了(关键是这个怎么作啊)
我希望bbb弹出来之后, 鼠标经过 <td>的时候aaa不能再出来了(关键是这个怎么作啊)我给你的那个就是啊
用jQuery 及具话搞定（可以来 www.cssrain.cn 参考）