昨天群里介绍了一个专门帮你PS图片的网站。吐司网。
网站在图片的预览处理上有点意思。当鼠标经过图片，显示为处理过的图片。这样大家能很清晰的对比ps前后的区别。不过我更敢兴趣的是怎么实现的。
我的做法预览：http://5key.net/demo/image-mouseover
切换图片效果是如何实现的：
其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。
这样做好不好：
图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。
大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。
我的做法：
CSS切换图片效果
相关文章
标签： css
有点意思。
不过你的这句不是很理解啊
未处理
[回复]
32行？
结合css看看。
再默认的情况下是隐藏的。hover的时候再读出来。
[回复]
看明白了 俩图片，处理前的图片在span里，静止时隐藏，hover的时候显示，同时绝对定位，遮住了原来西那时的处理后图片。
[回复]
这个本身到是不难理解，我个人理解不了的是为什么span{display:inline; position:absolute;}在绝对定位的时候本身就不占据宽高而具有了层的概念可以在图上面了。
[回复]
Firefox下貌似还有点小bug：
1、左图点击会链接到火星去；
2、有图只能点击并Hold住才能看，无法切换显示；
[回复]
@shunz
FF下昨天点击链接会火星？似乎我没这个问题。右图Hold才能显示确实有问题。。。也在想更好的方式。
：）
[回复]
哈，第一个问题，我这也貌似木有列，奇怪
关注第二个问题的改进
[回复]
是不是有个BUG 我做链接的时候，点击图片不法链接到网页!!
[回复]
@ 小孩子
可以链接到页面的。你可以贴出你的代码来看看
[回复]