CSS+DIV实现图片动态显示
来源：岁月联盟
时间：2008-06-17
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>图片动态显示</title>
<style type="text/css">
<!--
a {}{position: relative;/**//*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/display:block;/**//*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}a img{}{display: none; visibility:hidden;/**//*初始化信息面板不显示*/}a:hover {}{background:#fff;}/**//*IE7以下版本A状态伪类bug*/a:hover img {}{display:block;visibility:visible;position: absolute;padding:5px;display:block;width: 139px;/**//*只给出宽度，高让它随内容多少自动调整*/left:50px;/**//*这是相对父级A的定位*/top: 20px;border: 1px solid rgb(91,185,233);background-color: rgb(228,246,255);z-index:999;/**//*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/}a img {}{border:none;/**//*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/display:block;position: absolute;/**//*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/top:5px;/**//*这里的px是与信息面板大盒子的填充一样的*/left:5px;}-->
</style></head><body><a href="#" class="showImage">雪景小屋<img id="img1" src=http://www./xkerfiles/hdimg/080529/_12213R36.jpg></img></a></body></html>
上一篇：教程：CSS高级技巧之滑动门技术
下一篇：教程：CSS高级技巧之图片替换