背景ではなく単純に特定の画像に適用するCSS Sprite

この方法は背景に使う場合ではなく、
あくまでの特定の画像を切替える場合のCSSです。

ちなみに、IE6は対応していないようです・・
(IE6の場合、画像は入れ替わらずに元のものがそのまま表示されます)

コリスさんが丁寧に解説されてます

html(xthml)は↓

cssは↓ ※画像の幅・高さは必ず指定するみたいです

css3を使ってやると上にスライドするエフェクトがかけられるみたいです。

html(xthml)は通常時と同じで

css3を使ったCSSは↓

早速、背景を使ったCSS Spriteからこの記事のものに変更しました。
今までのものだとリンクだけになって空要素だったので・・ ^^;

実際に設置しているものは左側にあるツイッターの画像です。

オペラ・サファリ・ファイヤーフォックス・グーグルクロームでは
上にスライドするエフェクトがかかります。

IE7・IE8だと、普通にCSS Spriteの効果で画像が入れ替わり、
IE6だと、そのままの画像っていう感じです。

ちなみに背景画像をCSS Spriteで変更する場合はこちら

やっぱり、CSS3になるとかなり幅が広がり、スクリプトの活躍の場が
今までよりは減るようになりますね。

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)