CSS+DIV实现图片动态显示

 

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>图片动态显示</title>

<style type="text/css">

<!--

{

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 #5bb9e9;

background-color
: #e4f6ff;

z-index
:999;/*把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效*/

}


a img 
{

border
:none;/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/

display
:block;

position
: absolute;/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

top
:5px;/*这里的px是与信息面板大盒子的填充一样的*/

left
:5px;

}


-->

</style>

</head>

<body>

<href="#" class="showImage">雪景小屋<img id="img1" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg"></img></a>

</body>

</html>
posted @ 2008-06-16 21:50  周枫  阅读(1284)  评论(0编辑  收藏  举报