Lucky bag::blog: Preload :hover images in CSS を検証してみた

個別記事

前後の記事

Preload :hover images in CSS を検証してみた

この記事が属するカテゴリー: CSS

始めに断っておくけど、このエントリは Tips でもなく何のためにもならないもんです。ちょっと気になっていた記事があって検証してみたら、「チッ、使えないじゃん」ってオチだったんだけど、一応書き残しておこうかなってレベルのもんです。しかも、前置き長いし。

CSS を使ったロールオーバー

CSS の :hover 疑似クラスを使って、要素の背景画像を切り替えてロールオーバーの効果を出すってのは今や珍しくもなんともない。例えば、下記のような指定をしたとしよう。

a { background: url(normal.png) center left no-repeat; }
a:hover { background: url(hover.png) center left no-repeat; }

上記例のようにノーマル時とマウスオーバー時の画像を別々にしていると、マウスオーバーした時に hover.png を読み込みにいくため、通信環境によっては若干待たされる場合があるわけだ。そこで、解決方法としてノーマル時とマウスオーバー時の画像を一つにしてしまい、マウスオーバー時に位置をずらしてやるってのが一般的。

hover.html

CSS の指定で画像を先読みできるのか検証

ここからが本題。理由は分からないけど、どうしても画像は一つにしたくないって時に、マウスオーバー用の画像を先読み出来たら素晴らしいじゃないっすか。んで、前に見つけて気になっていたのが下記の記事。

maratz.com » archive » Preload :hover images in CSS

このサイトで紹介されている、画像先読みさせるためのメソッドってのは下記の通り。

a,
a:hover,
a:focus { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }

拙記事「リンクに関する疑似要素の記述順」でも紹介したことがあったけど、これじゃ上手く動作しないよ、ママン。そこで、ちょっと記述を変えて調べてみた。

a { background: url(hover.png); }
a:link,
a:visited { background: url(normal.png); }
a:hover { background: url(hover.png); }

preload.html

一番最初に a 要素で hover.png を呼び出して、その後の指定で上書きしてくれることを想定している。んで、キャッシュを見ながら検証してみたんだけど、残念ながら hover.png は先読みしてくれなかった。ファイルにアクセスした段階では、normal.png しか読み込まれていない。うーん、ダメかーっつうことで、引き続き調べてみようと思ってる。

2005-08-23T18:10:28+09:00 | コメント (6) | トラックバック (1) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/294

このリストは、次のエントリーを参照しています: Preload :hover images in CSS を検証してみた:

色々開発日誌さんからのトラックバック: CSSのみで、プリロードするロールオーバー; こういうのを「目から鱗」って言うんだと思う。性格には、プリロードではないのかも知れないけど、視覚的にロールオーバーする時に”ロードしてます”的にならないのがい... [続きを読む]; 2005年10月04日 11:09

Neo さんからのコメント

只今コメントを書こうとしたら、コメント部分のテキストエリアが横に伸びたのでびっくりしたNeoです。IEのバグでしょうか？

私の環境でも、preload.htmlは画像が表示されない瞬間がありました。
簡単に、待たされる事が無いロールオーバーを作るには、画像を1つにするしかないのでしょうかね。
hover.htmlでも、暫く経つとhoverにした時に少し表示されなかった…。同じ画像なのに…。

これは別の話なのですが、サンプルの綺麗なボタンのCGは、何のソフトで書いているのですか？
海外の「カスイケサイト」と言って紹介されてるサイトでも良く見るので、気になっていました。

それでは。

2005年08月23日 20:27

真琴さんからのコメント: Neo さんのコメントにもありますが、画像を 1 つにするのがプリロードいらずの現時点でのベターな解かなあ、と思います。
http://www.mushline.com/ のメニューボタンなんかが実例ですね。 ( カラクリの解説は http://www.mushline.com/junky/2003/111523.shtml に ); 2005年08月24日 00:27

e-luck さんからのコメント

>>Neo さん
>hover.htmlでも、暫く経つとhoverにした時に少し表示されなかった
これは IE6 の問題ですね。多分、サーバーサイドでしか解決は出来ないと思います。興味があれば、下記を見てみてください（海外サイトですが）。
http://dean.edwards.name/my/flicker.html

>サンプルの綺麗なボタンのCG
これはフォトショップで作ってます。機会があれば作成方法をエントリするかも知れません。

ちなみに、コメントエリアが横に伸びたって症状が気になるんですが…

>>真琴さん
そうですね、今んとこその方法がスマートでしょうね。
実際に背景画像を別々にしたいって状況はいまいち思いつかないのですが、そのために表示領域外で読み込ませるっていう醜悪な解決方法を見たことがあります。なんだかんなぁって感じでした :-P

2005年08月24日 12:44

Neo さんからのコメント

＞真琴さん
Mushlineさんはロールオーバーが綺麗だなぁと思って良く見てました。
デザインの幅は限られちゃうけど、テキストを活かせたらもっと良いでしょうね。

＞e-luckさん
IE6の問題だったんですね。参考記事も教えていただき有難う御座います。
フォトショップ…って、私も持ってるじゃないか！！(笑)
全然使って無いから分からなかった…。

コメントエリアが伸びた件ですが、キャプチャをアップしました。ブラウザはIE6です。
http://neo.s58.xrea.com/1.jpg
http://neo.s58.xrea.com/2.jpg
(1週間位経ったら消しちゃうかもしれません…)

2005年08月24日 20:29

e-luck さんからのコメント: >>Neo さん
うぉー、なんじゃそりゃ。
気付いていませんでした。わざわざキャプチャして頂いて申し訳ないっす。
JavaScirpt 切ると再現しないっすねぇ。なんだろ、ちょっと調べてみます。; 2005年08月25日 12:29

煤さんからのコメント: あ、ホントにテキストエリアがのび太・・・じゃなくて、伸びたー。; 2006年11月05日 00:28

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog