念实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果

想实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果
我想实现的效果如上，类似http://www.lao88.cn/index.php这个网站下中间那块的效果，附上一张图

然后我自己试着找了个，但是只是用css完成的，而且效果也不太好，就是下面两张图的效果


代码如下：

<style type="text/css">     /*Tooltips*/     .tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; }      .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ }      .tooltips span{ display: none; }      .tooltips:hover span{     /*span 标签仅在 :hover 状态时显示*/     display:block;      position:absolute;      top:0px;      left:0px;      width:220px;      height:335px;     border:1px solid #999999;      background-color:#FFFFFF;          padding: 3px;      color:black;  </style>

<a class="tooltips" href="#tooltips">     <img src="images/1.jpg" width="100" height="100" style="border: 0" alt="" />     <span>         <table>                     <tr>                       <td>                          <img src="1.jpg" style="border: 0" width="212" height="212"                                                                        alt="" />                        </td>                     </tr>             <tr>             <td>                     name                                     </td>             </tr>         </table>     </span> </a>