CSS切换图片效果 « 5key’s blog

CSS切换图片效果

昨天群里介绍了一个专门帮你PS图片的网站。吐司网。
网站在图片的预览处理上有点意思。当鼠标经过图片，显示为处理过的图片。这样大家能很清晰的对比ps前后的区别。不过我更敢兴趣的是怎么实现的。
我的做法预览：http://5key.net/demo/image-mouseover

切换图片效果是如何实现的：

其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。

这样做好不好：
图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。
大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。

我的做法：

下载: image-mouseover.html

<style>
h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;}
.box2{}
.box2 img{display:block; padding:2px; border:0;}
.box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}
.box2 a span{display:none; color:#F00;}
.box2 a span h1{font-size:12px; position:absolute; bottom:0; background:#333; color:#FFF; font-weight:normal; text-align:center; width:128px; padding:4px; display:block;
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.box2 a:hover{color:#999; border:2px solid #333; }
.box2 a:hover span{display:inline; position:absolute;}
.box3{}
.box3 img{display:block; padding:2px; border:0;}
.box3 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}
.box3 a span{display:none; color:#F00;}
.box3 a span h1{font-size:12px; position:absolute; bottom:0; background:#333; color:#FFF; font-weight:normal; text-align:center; width:128px; padding:4px; display:block;
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.box3 a:active{color:#999; border:2px solid #333; }
.box3 a:active span{display:inline; position:absolute;}
</style>
</head>
<body>
<h2>CSS切换图片效果</h2>
<div class="box2">
<a href="#"><span><h1>未处理</h1><img src="1.jpg" /></span><img src="2.jpg" /></a>
</div>
<div class="box3">
<a href="#"><span><h1>未处理</h1><img src="1.jpg" /></span><img src="2.jpg" /></a>
</div>
</body>

标签： css

这篇文章发布于 2008年01月9日，星期三，16:49，归类于 web开发。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

9 条评论发表在“CSS切换图片效果”上

xuruoing 说到：

2008-01-09 @ 18:03

有点意思。
不过你的这句不是很理解啊
未处理

[回复]
5key 说到：

2008-01-09 @ 18:06

32行？
结合css看看。
再默认的情况下是隐藏的。hover的时候再读出来。

[回复]
CSS 说到：

2008-01-10 @ 14:59

看明白了俩图片，处理前的图片在span里，静止时隐藏，hover的时候显示，同时绝对定位，遮住了原来西那时的处理后图片。

[回复]
DeadFire 说到：

2008-01-15 @ 08:47

这个本身到是不难理解，我个人理解不了的是为什么span{display:inline; position:absolute;}在绝对定位的时候本身就不占据宽高而具有了层的概念可以在图上面了。

[回复]
Shunz 说到：

2008-02-21 @ 17:13

Firefox下貌似还有点小bug：
1、左图点击会链接到火星去；
2、有图只能点击并Hold住才能看，无法切换显示；

[回复]
5key 说到：

2008-02-21 @ 17:32

@shunz

FF下昨天点击链接会火星？似乎我没这个问题。右图Hold才能显示确实有问题。。。也在想更好的方式。
：）

[回复]
Shunz 说到：

2008-02-21 @ 17:44

哈，第一个问题，我这也貌似木有列，奇怪

关注第二个问题的改进

[回复]
小孩子说到：

2008-02-21 @ 21:04

是不是有个BUG 我做链接的时候，点击图片不法链接到网页!!

[回复]
5key 说到：

2008-02-21 @ 21:15

@ 小孩子

可以链接到页面的。你可以贴出你的代码来看看

[回复]

5key.net