鼠标在缩略图上时显示原图片的CSS代码
在网页中经常使用缩略图的方法,太大的图片会影响到网页打开的速度。有时候缩略图会很不清楚,需要查看原来的大图,使用这种方式就很方便了,不用再新开一个窗口了。Hypo从CSDN上找到了下面的代码。
以下是CSS代码部分:
<style>
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#eeeeee;padding:5px;left:-10000px;border:0px dashed gray;visibility:hidden;color:black;text-decoration:none;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:20px;left:60px;right:60px;bottom:10px}
</style>
调用图片时应使用的代码(示例):
<div>
<a class="thumbnail" href="http://www.renhaibo.com/1.jpg" target="_blank">
<img src="http://www.renhaibo.com/1.jpg" width="160" height="200px">
<span>
<img src="http://www.renhaibo.com/1.jpg">
</span>
</a>
</div>
虽然效果还不是很完美,但已经很不错了。
转载请注明,转自:RenHaibo.com
本文链接地址:http://www.renhaibo.com/archives/59.html
分 类:网络技术 | ping功能和评论功能被关闭。
上一篇:教育部通知(搞笑)
下一篇:一张隐藏很深的色图
Sorry, comments for this entry are closed at this time.