もうちらつきで困らない！画像のロールオーバーでちらつきを防ぐテクニック

2010年11月18日

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。
【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）

画像ボタンなどでロールオーバーをしようとする際に、画像を読み込む一瞬のラグでボタンがちらついてしまうことがあります。そのちらつきを防ぐための方法をご紹介します。

HTML

1<div class="sampleButton">
2  <a href="#" class="btn">>span>サンプルテキスト>/span>>/a>
3</div>

CSS

01.sampleButton {
02    background: url(./button_ov.gif) no-repeat;
03}
04.sampleButton a {
05    width: 35px;
06    display: block;
07    background: url(./button.gif) no-repeat;
08    text-align: left;
09}
10.sampleButton a span {
11    height: 75px;
12    display: block;
13    text-indent: -9999px;
14}
15.sampleButton a:hover {
16    background: none;
17}

サンプルページ

仕組みとしては、通常のロールオーバーのように画像を切り替えるのではなく、あらかじめ二つの画像を重ねておき、ロールオーバーした際に上の画像を消す、というものです。こうすることで、画像切り替えのたびに画像を読み込む必要がなくなるため、ロールオーバーでちらつくことなく画像の切り替えを行うことが出来ます。

もうちらつきで困らない！画像のロールオーバーでちらつきを防ぐテクニック

HTML

CSS

関連記事