鼠标在缩略图上时显示原图片的CSS代码

2008年12月16日  星期二  Hypo @ 22:49:02     8,091 views     

在网页中经常使用缩略图的方法,太大的图片会影响到网页打开的速度。有时候缩略图会很不清楚,需要查看原来的大图,使用这种方式就很方便了,不用再新开一个窗口了。HypoCSDN上找到了下面的代码。

以下是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


分 类:网络技术 | 发表评论 | trackback
上一篇:
下一篇: