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つの画像を重ねておいてマウスオーバーの際に上の画像を消すというやり方です。
このやり方だとインターネットオプションでインターネット一時ファイルの設定をページを表示するごとに確認するとしている方(つまりプリロードできない環境の方)でもちらつきなくロールオーバー処理を行う事ができます。