<html xmlns="<a target="_blank"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片動(dòng)態(tài)顯示</title>
<style type="text/css">
<!--
a {
position: relative;/*設(shè)置其定位方法為相對(duì)定位，等一下內(nèi)部信息面板就可以相對(duì)它定位*/
display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點(diǎn)中鏈接文字就可以響應(yīng)鏈接*/
}
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;/*只給出寬度，高讓它隨內(nèi)容多少自動(dòng)調(diào)整*/
left:50px;/*這是相對(duì)父級(jí)A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一個(gè)較高的位置，使鏈接文字過(guò)長(zhǎng)時(shí)不會(huì)與面板重疊,但這只對(duì)FF有效*/
}
a img {
border:none;/*去除圖片邊框，默認(rèn)情況下，鏈接內(nèi)的圖片在標(biāo)準(zhǔn)瀏覽器會(huì)出現(xiàn)邊框*/
display:block;
position: absolute;/*用絕對(duì)定位抽離正常文本流，不然在設(shè)計(jì)的時(shí)候考慮到不同瀏覽器正常顯示會(huì)更麻煩*/
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>
