用CSS实现图片切换

2007-1-22 11:09:05 AM
已将所有Swap Image改为CSS实现。实现同样效果,CSS比JS有几点优势:

1. 兼容性更强,在浏览器不支持或用户屏蔽JS的情况下仍能运行
2. 两张图合成一张,通常情况下图片体积更小,减小下载量和服务器请求
3. 不需要在事件发生时花时间等待下载新图片,用户体验更佳。当然JS可以先预载图片,但需要附加的函数实现,显然麻烦很多。

原理:超链接的伪类可以定义在link和hover等不同状态下的CSS,因此可以利用超链接A为容器实现。首先我们把切换需要的两张图片合成为一张(位置错开),然后在CSS中定义a:link和a:hover时background-image为这张图片,再利用background-position-x和background-position-y属性分别将背景图坐标定义为背景合成图中两图的对应坐标。

下面的简单的CSS类写法:
a.exif_link:link, a.exif_link:visited{
    background:url(../images/icon_exif.gif) no-repeat -60px -26px;
}
a.exif_link:hover{
    background:url(../images/icon_exif.gif) no-repeat;
}
[Edit at 2007-1-22 11:13:16 By poorfish]
Comments [0] | TrackBack[5] | 1444 views | TrackBack

Add your own comment

Name:       *

Password:

Code:        

Your Comment: