昨日紹介した『CSS 読者になるボタンのロールオーバー』の補足

昨日ご紹介した『CSS 読者になるボタンのロールオーバー』の
記事内のCSSでロールオーバーを行うと、マウスを持って
いってロールオーバーされる際に、画像の読み込み時間が
発生するために、一瞬ちらつきが起こってしまいます。

特にIE6は毎回読み込みをするので、ずっとちらつきます。
（他のブラウザーだと最初の読み込み時だけちらつきます。）

ですので、読み込みの際にちらつかせない対策をしておくと
ロールオーバーがよりキレイになります。

で、その対策方法ですが、『CSS 読者になるボタンのロールオーバー』で
紹介されていたCSSにさらに一つ加えることで解決します。

『CSS 読者になるボタンのロールオーバー』のCSS
http://ameblo.jp/exlink/entry-10056775717.html

/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{

display: block;
padding:0;
margin:0;

height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}

↓

/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}

#readerList dl dt{
padding:0;
margin:0;
height:auto;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}

#readerList dl a{
display: block;
padding:0;
margin:0;
height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}

※追加した部分を赤くしています。

簡単に説明しておきますと、ロールオーバーしたときに、マウスが
のったときの画像を読み込むのに時間がかかってしまい、画像が
表示されてない時間が発生して、背景が見えてしまうことで
ちらつきが発生しています。

そこで、読み込みしているときに、既に背景を最初の画像にして
おくことで、消えても最初の画像が見えるようになり、ちらつきを
見せなくしています。
（背景にする画像は最初のでもマウスがのったときのでも
どちらでも大丈夫です。）