<html xmlns="<a target="_blank"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片動態(tài)顯示</title>
<style type="text/css">
<!--
a {
position: relative;/*設置其定位方法為相對定位，等一下內部信息面板就可以相對它定位*/
display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點中鏈接文字就可以響應鏈接*/
}
a img{
display: none; visibility:hidden;/*初始化信息面板不顯示*/
}
a:hover {background:#fff;}/*IE7以下版本A狀態(tài)偽類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;/*去除圖片邊框，默認情況下，鏈接內的圖片在標準瀏覽器會出現(xiàn)邊框*/
display:block;
position: absolute;/*用絕對定位抽離正常文本流，不然在設計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
top:5px;/*這里的px是與信息面板大盒子的填充一樣的*/
left:5px;
}
-->
</style>
</head>
<body>
<a href="#" class="showImage">Photoshop打造章子怡相框<img id="img1" src="http://images.enet.com.cn/eschool/gdtup/tu6/787358127.jpg"></img></a> </body> </html>
