背景ではなく単純に特定の画像に適用するCSS Sprite
Posted under: この方法は背景に使う場合ではなく、
あくまでの特定の画像を切替える場合のCSSです。
ちなみに、IE6は対応していないようです・・
（IE6の場合、画像は入れ替わらずに元のものがそのまま表示されます）
html(xthml)は↓
1 2 3 | <div class="affiliates"> <a href="#"><img src="sample.gif" alt="" /></a> </div> |
cssは↓ ※画像の幅・高さは必ず指定するみたいです
1 2 3 4 5 6 7 8 9 10 11 12 | .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は↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .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になるとかなり幅が広がり、スクリプトの活躍の場が
今までよりは減るようになりますね。
こちらも合わせてご覧ください - このページの内容と関連がある記事 -
TrackBack URL for this entry
コメントをいただけると励みになります！よろしくお願いします。
Blog info
Recommend Servers
