<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">
<!--
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 #5bb9e9;
background-color: #e4f6ff;
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://hiphotos.baidu.com/木合達/pic/item/30392594485a1413d21b70c9.jpg"></img></a>
</body>
</html>
