画像のプリロード

このエントリーをはてなブックマークに追加

CSSでロールオーバーボタン(マウスが上にくると画像が変わるボタン)を実装する際に、プリロードを行っていないと、マウスオーバー画像が読み込まれるまでに若干のチラツキが発生します。

プリロードはjavascriptで行うの方法が一般的ですが、CSSで行うとデザイン時に同時にプリロードの処理を行うことができて便利です。

(X)HTMLに記述するコード

<p class="button">
 <a href="#">sample</a>
</p>

CSSに記述するコード

p.button{
	background:url("img01/a_img.gif") no-repeat;
}
p.button a{
	display:block;
	width:200px;
	height:50px;
	background:url("img01/b_img.gif");
	text-indent:-9999px;
}
p.button a:hover{
	background:none;
}


サンプル

これは、事前に読み込んでいた画像をマウスオーバーの際に表示するのではなく、
2つの画像を重ねておいてマウスオーバーの際に上の画像を消すというやり方です。

このやり方だとインターネットオプションでインターネット一時ファイルの設定をページを表示するごとに確認するとしている方(つまりプリロードできない環境の方)でもちらつきなくロールオーバー処理を行う事ができます。

スポンサードリンク