想实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果
我想实现的效果如上，类似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>
总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？
<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>
总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？
