#442 XHTML1.1 + CSS で Preload いらずロールオーバー方法

XHTML1.1 で OnMouseOver は使えない? の続き。

やりました。img に name 使わんどころか Script 自体を使わない CSS でのロールオーバーがしたいんだけどカーソル砂時計はいやなのよ。そんなアナタに。2U。俺だよ。いつもいつも有難うございますですのう。＞shiki さん

て事で Hatena::agenda 経由の Fast rollovers, no preload needed。最初見た時はソースを見てもいまいち良く分からんかったのですが、とある拍子に分かっター!

例えばウチのトップページの About ボタンの場合。

このように3つのボタンを 1 枚画像で作った訳です。

上から、「デフォルト表示のボタン」「a:hover 時の表示ボタン」「a:acitve 時の表示ボタン」になってます。

こいつを CSS の方で

a#about:link, a#about:visited{
  background: transparent url("./img/button_01.gif") no-repeat 0px 0px;
}

a#about:hover{
  background-position: 0px -72px;
}

a#about:active{
  background-position: 0px -144px;
}

みたいに、background-position で背景画像を上にスライド（?）させてロールオーバーのように見せるという訳なんですか! なんですよ! そしてこれだと OnMouseOver 時と OnClick 時の画像が分かれて無く 1 枚画像なので、Preload なんか要らないですね。というなんともいえねー発想。

しかし私の場合 Example ページとは違っておもっくそテキストを背景画像と一体化してしまってるんで、（HTML 内のテキストは display: none; してます）画像を読み込まない設定にしてる方々にはなーんも表示されないやり方をやってしまってます。でも一応イラストサイトなんでそこら辺は考えずに・・・という方向で・・・・もにょもにょ。

あと Opera6 では a 要素の背景画像は表示されないらしいので、これまたなーんも見えないらしいのですが、Opera 使いの方々ならユーザースタイルシートを知ってらっしゃるだろう。という事でごにょごにょ。

とりあえず苦情が出ない限りこれで行くます隊長。

現在は上記のボタン画像を使ったデザインは使用していません。