2008/09/15

CSS:: 画像の先読み

最近になってXHTML+CSSに慣れ、あれやこれやを作成できるまでになりました。
が、anchorタグのhover時に使う画像の先読みをしていないことに気が付きました。

一般的には、javascriptでやるようですが調べてみるとCSSでもできるようです。
HTML上の記述をbody直下にしてみましたが、各種ブラウザ※で正常に働いていることがわかりました。
CSSで簡単にできるし、onloadなどを使っている場合に役立ちそうですな。
※IE6, IE7, Firefox2.0.0.16, Firefox3.0.1

■HTML上の記述
<div id="preload">
 <img src="http://www.blogger.com/xxxxx" />
 ・・・・
</div>

■CSS上の記述
#preload{
 width:0;
 height:0;
 position:absolute;
 filter: alpha(opacity=0);
 opacity: .0;
}
}

2009/01/25 追記
やってみたけど、うまくいかないね。
いろんなサイトでもこれ以外の方法でやっているようですが、CSS使った場合、開発したサイトではうまく動作しなかった。
黙ってonMouseOverとかを使った方がいいのかな・・・
スポンサーリンク

スポンサーリンク