JavaScriptを使わずにやるimg要素のロールオーバーサンプル

本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事

[kojika17]

本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなの

[sgw_spt]

jsオフ、画像オフでも表示

[flakwing]

タブ型のナビゲータサンプルあり

[emonortem6]

繋がったimgを背景にして、個別背景をhoverで無くすやり方。

[hiyori517]

CSS

[hiro_y]

CSSでimg要素のロールオーバー。

[lucky-bag]

ホップ本の宣伝あざっす！正直この手法を発見した時は自分ながら良いアイデアじゃんって自画自賛した。

[wakatakahawks]

すげー！頭良い～！！これならCSSオン×画像オフ×JSオフ（こんな状況あんまないだろうけど）状態にも画像にaltが入ってれば耐えられるね。究極の方法かもこれ！マジスゲー！久々にCSSでこんなに興奮した！

[n2s]

なるほど。