CSS+DIV实现图片动态显示(完美版)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Show Photo</title>
<script type="text/javascript" language="javascript">
function ImageDivMouseOver(obj)
{
document.getElementById(obj).style.left=window.event.x+15+document.documentElement.scrollLeft;
document.getElementById(obj).style.top=window.event.y+15+document.documentElement.scrollTop;
}
</script>
<style type="text/css">
.showImage a{
display:block;/**//*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}
.showImage a img{
display: none; visibility:hidden;/**//*初始化信息面板不显示*/
}
.showImage a:hover{_border:none;text-decoration:none;}/**//*IE7以下版本A状态伪类bug*/
.showImage a:hover img{
display:block;
visibility:visible;
position: absolute;
display:block;
width: 139px;/**//*只给出宽度，高让它随内容多少自动调整*/
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/**//*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
.showImage a img{
border:none;/**//*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;/**//*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
left:80px;
top:30px;
}
.imgStyle{z-index:10px; position:absolute}
</style>
</head>
<body>
<form>
<div style="height:700px;"></div>
<div class="showImage"><a href="#" onmouseover="ImageDivMouseOver('img1')">第一个图片显示链接<img id="img1" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"></img></a>
<br />
<a href="#" onmouseover="ImageDivMouseOver('img2')" >第二个图片显示链接<img id="img2" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"/></a>
<br />
<a href="#" onmouseover="ImageDivMouseOver('img3')" >第三个图片显示链接<img id="img3" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"/></a></div>
</form>
</body>
</html>
优化内容:
1.跟随鼠标
2.增加考虑滚动条因素
3.图片最前位置显示
每天学习一点点!
