ウェブデザイナーの日記

画像ファイルをプリロードしたいときがよくあります。プリロードっていうのは、つまり、htmlページがブラウザのキャッシュに読み込まれた時点でいっしょに読み込ませたいという意味です。オンマウスオーバーの代替画像とか。たいていはjavascriptでやるものでしょうが、かんたんなものなら、cssの方がお手軽です。プリロードしたい画像を次のようにcssで読み込ませちゃいましょう。

#image-preload{
width: 0px;
height: 0px;
display: inline;
background-image:url('画像へのurl');
background-image:url('画像へのurl');
background-image:url('画像へのurl');
}

画像はいくつでもオッケー。1行づつbackground-imageとして記述しましょう。んでもって、bodyのどこか、私はアクセス解析のタグの下なんかによく入れますが、どこでもよいのでこれを記述↓

<div id="image-preload"></div>

これでプリロードされる。ちょっとべんりだと思いませんか？ついでに書いとくと、オンマウスオーバーのリンクボタンをやりたかったら、このようにhtmlに書いとけばオッケーですね↓

<a herf="リンク先url"><img src="画像へのurl" onmouseover="this.src='代替画像へのurl'" onmouseout="this.src='画像へのurl'" /></a>

と書いといて、代替画像を上のやり方でプリロードさせる。という風にすれば、いちいちjavascriptの外部ファイルを書いたりしなくてもサクッとできるので、ちょびっとやりたいときなんかにはこっちの方がお手軽です。

ところで、マウスオンオーバーなんだか、オンマウスオーバーなんだか、どっちだったかいつもわからなくなります。これってトシ？