类似CSDN论坛上 用户头像的悬浮窗怎么实现
就是当我把鼠标移动到每个用户的每个人的头像上的时候会出现一个提示的悬浮窗口（如下图所示）
---现在我的需要是：页面上有一个table，当我把鼠标移动到没一个td单元格上的时候，都会弹出一个悬浮窗口，窗口中显示的内容都是动态去后台获取的。由于我对css 很不熟悉，所以在这里求一个完整的示例，有的朋友请提供一份，谢谢了。
[解决办法]
<html> <head><script language="javascript" type="text/javascript"> function showUserCard(name){ var taget_obj = document.getElementById(name); taget_obj.style.display="block"; } function hideUserCard(name){ var taget_obj = document.getElementById(name); taget_obj.style.display="none"; }</script> </head> <body> <div> <ul> <li class="center"><a><img onmouseover="showUserCard('fengjssy');" onmouseout="hideUserCard('fengjssy');" src="http://avatar.profile.csdn.net/8/9/1/2_fengjssy.jpg"></a></li> </ul></div> <div id="fengjssy" style="border-style: none; border-width: 0px; width: 357px; height: 194px; position: absolute; text-align: left; left: 150px; top: 10px; display:none;"> <img src="http://avatar.profile.csdn.net/8/9/1/2_fengjssy.jpg"> 其他内容 </div> </body></html>
[解决办法]
我胡乱写了个简单的例子，你看看吧。。。记得加上jquery.js再运行噢。。。
<html> <head> <title>绝对定位</title> <style> #msg { position: absolute; width:200px; height:150px; border:3px solid blue; padding: 5px 5px 5px 5px; display:none; color:red; background-color:white; } body { padding-left:100px; padding-top:100px; } td { width:80px; height:80px; } </style> <script src="jquery-1.2.6.pack.js"></script> </head> <body> <div> <table border="1"> <tbody> <tr> <td>Im's a TD11111</td> <td>Im's a TD22222</td> <td>Im's a TD33333</td> <td>Im's a TD44444</td> <td>Im's a TD55555</td> <td>Im's a TD66666</td> </tr> <tr> <td>Im's a TD77777</td> <td>Im's a TD88888</td> <td>Im's a TD99999</td> <td>Im's a TD00000</td> <td>Im's a TD12312</td> <td>Im's a TD45645</td> </tr> <tr> <td>Im's a TD78989</td> <td>Im's a TD54743</td> <td>Im's a TD24674</td> <td>Im's a TD34579</td> <td>Im's a TD23473</td> <td>Im's a TDsfhu7</td> </tr> <tr> <td>Im's a TD!</td> <td>Im's a TD!</td> <td>Im's a TD!</td> <td>Im's a TD!</td> <td>Im's a TD!</td> <td>Im's a TD!</td> </tr> </tbody> </table> </div> <div id="msg"></div> </body> <script> $("td").bind('mouseover', function(){ var str = "<b>当前td的内容：" + $(this).html() + "<br>此处可以用于显示ajax从后台获取数据。</b>"; var right = $(this).get(0).getBoundingClientRect().right - 40; var top = $(this).get(0).getBoundingClientRect().top + 40; $("#msg").html(str).css({"left":right + "px","top": top + "px"}).show(); }); $("td").bind('mouseout', function(){ $("#msg").hide(); }); </script></html>