低価格・高品質・最速のHTMLコーディングはクロノドライブへ

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

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。
【比較】覚えておきたいロールオーバー画像切替え 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・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ