鼠标滑到图片上在规定区域内弹出层

Question

我现在实现了一个效果是鼠标指到图片上，弹出层显示详细信息，效果图如下：
第一张图片是产品图片：第二张图片是鼠标指到第一行的第二张图片弹出的效果：第三张图片是指到第一行的第三张图片弹出的效果：第四张图片是鼠标指到第二行的第二张图片弹出的效果：
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>

Answer 1

我觉得还是控制样式CSS,就是div对div的相对定位和觉得定位问题。理解相对定位和绝对定位，我想也不会那么难做了。

Answer 2

你把top left固定死.不如不写.   换个分辨率你那个就乱了.
   var off_obj=$(你要定位的div).offset();
  
   $(要显示的div).css("left",off_obj.left).css("top",off_obj.top).fadein();

Answer 3

我把css样式改了一下，结果不同浏览器显示的效果不同：
IE6下：但是当鼠标移开的时候就变成下面这个样了，弹出的层并没有消失：当我鼠标再指到别的图片上的时候，就变成下面这个样子：360和火狐浏览器下效果还是不错的但是还有一个问题就是，因为我外面是用了iframe，所以最右边弹出的层就没显示全，被盖住了一部分：这个应该怎么改？
再就是搜狗和IE7下的效果，弹出的层向右偏移了一格：大家帮忙看看，怎么能让它们统一起来呢，最起码先让IE6下显示的效果和360、火狐是一样的
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 状态时显示absolute  relative*/
    display:block;
    position:absolute;
    top:45px;
    /*left:0px;*/
    width:220px;
    height:360px;
    /*border:1px solid #999999;
    background-color:#FFFFFF;*/
    background-image:url(images/newinpick.jpg);
    padding: 3px;
    color:black;
    z-index:111;
</style>