MARS博客

介绍一种用css制作缩略图弹出全图的方法，实现过程中没有用到任何的js。

HTML代码：

<DIV id=pic>
<A class=p1 title="thumbnail image" href="http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm" mce_href="http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm"><img title="BeautyTn" height=100 src="Beauty-tn.jpg" mce_src="Beauty-tn.jpg" width=100><IMG class=large title="Beauty" height=498 src="Beauty.jpg" mce_src="Beauty.jpg" width=500></A>
</DIV>

对应的CSS：

#pic {WIDTH: 100px; BACKGROUND-COLOR: #ffffff; margin: 100px 0 0 80px;}
#pic A .large { BORDER: 0px; DISPLAY: block; WIDTH:0px; HEIGHT: 0px; } /*首先将大的展示图的高宽设为0，既不显示*/
#pic A IMG { BORDER: 0px;}
#pic A.p1 { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:visited { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:hover {COLOR: #000000; BACKGROUND-COLOR: #8c97a3; TEXT-DECORATION: none}
#pic A.p1:hover .large {BORDER: #000000 1px solid; DISPLAY: block; LEFT: 150px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 498px } /*当鼠标经过缩略图时，展示图再设定的绝对位置显示*/

     查看效果