鼠标滑到图片上在规定区域内弹出层
我现在实现了一个效果是鼠标指到图片上，弹出层显示详细信息，效果图如下：
第一张图片是产品图片：
第二张图片是鼠标指到第一行的第二张图片弹出的效果：
第三张图片是指到第一行的第三张图片弹出的效果：
第四张图片是鼠标指到第二行的第二张图片弹出的效果：
http://img.my.csdn.net/uploads/201306/26/1372209557_3807.jpg
现在的问题是第一行的第一、二张图片弹出的效果是正确的，第一行的第三张图片弹出的层怎么让它不超出这三张图片的范围，也就是说它弹出的层的位置跟第二张图片是一样的，然后还有一个就是说怎么让第二行图片弹出层的位置是跟第一行图片弹出层的位置是一样的，而不是像上面第四张图片似的，在当前位置弹出层，效果应该跟第一行第二张图片弹出的位置是一样的？（可能说的有点多，有点绕，我怕没说明白所以说的详细点，还请各位看仔细，谢谢！）
代码如下：
<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;
background-image:url(images/newinpick.jpg);
padding: 3px;
color:black;
</style>
<table>
<tr>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/01.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/01.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
name
</td>
</tr>
</table>
</span></a>
</td>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/03.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/03.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
3333
</td>
</tr>
</table>
</span></a>
</td>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/02.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/02.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
5555
</td>
</tr>
</table>
</span></a>
</td>
</tr>
<tr>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/02.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/02.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
6666
</td>
</tr>
</table>
</span></a>
</td>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/01.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/01.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
7777
</td>
</tr>
</table>
</span></a>
</td>
<td>
<a class="tooltips" href="#tooltips">
<img src="images/03.jpg" width="100" height="100" style="border: 0" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
<span>
<table>
<tr>
<td>
<img src="images/03.jpg" style="border: 0" width="212" height="212" alt="鼠标滑到图片上在规定区域内弹出层,该如何处理" />
</td>
</tr>
<tr>
<td>
8888
</td>
</tr>
</table>
</span></a>
</td>
</tr>
</table>
[解决办法]
我觉得还是控制样式CSS,就是div对div的相对定位和觉得定位问题。理解相对定位和绝对定位，我想也不会那么难做了。
[解决办法]
你把top left固定死.不如不写. 换个分辨率你那个就乱了.
var off_obj=$(你要定位的div).offset();
$(要显示的div).css("left",off_obj.left).css("top",off_obj.top).fadein();
