CSS图片切换效果

Question

鼠标经过时图片切换效果不要影响整体布局!

Answer 1

要CSS的呀？一般都用JS的。

如果是CSS的，只能做到背景切换，做不到图片本身切换。

为了要支持IE6，所以一般都用a的伪类来做这种效果

a{background-image:url(普通状态时的背景图片);}
a:hover{background-image:url(鼠标放上去的背景图片);}

如果是做图片本身切换的话，只能用JS
<img src="原图片" onmouseover="this.src='新图片';" onmouseout="this.src='原图片';" />

Answer 2

css sprites技术，目的是减少http请求数，加快网页加载速度，将几个相似图片整合成一个图片，通过定位图片的背景位置来实现效果，个人认为主要适用于导航，其他地方滥用比较麻烦，要整合图片。
例子：
图片有两张高为30px的图片组成。上半部分是导航原始图片，下半部分是鼠标经过图片
a{background:url(a.gif) 0 0;}
a:hover{background:url(a.gif) 0 30px;}

Answer 3

我是来赞同二楼的