----------------------- 2010 年 6 月 8 日 -----------------------
背景ではなく単純に特定の画像に適用するCSS Sprite
---- この記事は おおよそ 2分25秒 で読めます ----
この方法は背景に使う場合ではなく、
あくまでの特定の画像を切替える場合のCSSです。
ちなみに、IE6は対応していないようです・・
（IE6の場合、画像は入れ替わらずに元のものがそのまま表示されます）
html(xthml)は↓
<div class="affiliates">
<a href="#"><img src="sample.gif" alt="" /></a>
</div>cssは↓ ※画像の幅・高さは必ず指定するみたいです
.affiliates a {
width: 204px;/* 画像の幅 */
height:182px;/* 画像の高さ */
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
}css3を使ってやると上にスライドするエフェクトがかけられるみたいです。
html(xthml)は通常時と同じで
css3を使ったCSSは↓
.affiliates a {
width: 204px;/* 画像の幅 */
height:182px;/* 画像の高さ */
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;/* 画像の高さ */
}早速、背景を使ったCSS Spriteからこの記事のものに変更しました。
今までのものだとリンクだけになって空要素だったので・・ ＾＾；
実際に設置しているものは左側にあるツイッターの画像です。
オペラ・サファリ・ファイヤーフォックス・グーグルクロームでは
上にスライドするエフェクトがかかります。
IE7・IE8だと、普通にCSS Spriteの効果で画像が入れ替わり、
IE6だと、そのままの画像っていう感じです。
ちなみに背景画像をCSS Spriteで変更する場合はこちら
やっぱり、CSS3になるとかなり幅が広がり、スクリプトの活躍の場が
今までよりは減るようになりますね。
： ： このページの内容と関連がある記事 ： ：
- CSS Sprite で異なる背景画像をひとつにまとめて効率良く読み込ませる
- ショートハンド
- ショップ作成で使えそうなCSSのテクニック!? part 1
- 角丸画像で切り抜いた写真に角丸の枠線を付ける方法
- サーチフォームのカスタマイズ（ショップサーブ編）
