CSSで指定した背景画像がちらくつ現象 [Cool Web Window]

Top ＞ webコラム＞素敵なサイトを作るために＞ CSSで指定した背景画像がちらくつ現象

CSSで指定した背景画像がちらくつ現象

アンカーをオンマウスしたら背景画像が切り替わるという技はよく使います。
実現する方法にはCSSとJavaScriptがあります。
ソースの見やすさからはCSSなのですが、気をつけないといけないことがあります。

このテクニックは主にメニュー部分で使用することがあると思います。
個人的にはJavaScriptがあまりわからないのでCSSを用いることが多いのですが、CSSを使用した場合、実は落とし穴？があります。
なんと、オンマウス・オンマウスアウトの切り替え時に、画像の読み込みが遅く、ちらついて見えてしまうことがあります。
恐らくFirefoxでは起こらない現象と思います。
IEでは設定によっては起こりませんが、ある設定をしていることにより、そのちらつき現象が起きてしまいます。

IE6の場合。

インターネットオプション＞全般＞設定＞保存しているページの新しいバージョンの確認→「ページを表示するごとに確認する」にチェック。

こうすることにより、毎回サーバからキャッシュされるようになるので、読み込みが遅くなるのです。
このような設定をしている人はもしかしたら一部の人かもしれませんが、やはり防げるものなら防ぎたいですよね。

CSSでもあるテクニックを用いれば、ちらつき現象は解消できます。

CSSを利用した一般的な方法

最初は、一般的な設定方法なのだけど、ちらつき現象が起きやすい方法を説明します。

まずは画像を用意します。
オンマウス時

そうでないとき。

以下のようにコードを記述します。
HTMLコード

<html>
<head></head>
<body>
<div class="bgChange">
<a href="#">アンカー</a>
</div>
</body>
</html>

CSS

.bgChange{
    width : 100px ;
    height : 100px ;
    text-indent:-9999px; /* アンカーの文字を消したい時に使用 */
    overflow:hidden; /* アンカーの文字を消したい時に使用 */
}

.bgChange a{
    display : block ;
    width : 100px ;
    height : 100px ;
}

.bgChange a:link{
    background-image : url(sample1.jpg) ;
}

.bgChange a:visited{
    background-image : url(sample1.jpg) ;
}

.bgChange a:hover{
    background-image : url(sample2.jpg) ;
}

前者より読み込みを早くする方法

次に、読み込みを早くする方法を説明します。
オンマウス時の画像とオンマウスアウトの画像をくっつけて一枚の画像にします。

CSSは以下の通り。
a:hoverに「background-position:」を指定するだけです。
つまり、オンマウス時の画像もオンマウスアウトの画像も視覚的には見えないけれども、常にページ上に表示しておきます。
そして、オンマウス/オフの時に表示されている画像の位置をずらすのです。

CSS

.bgChange{
    width : 100px ;
    height : 100px ;
    text-indent:-9999px; /* アンカーの文字を消したい時に使用 */
    overflow:hidden; /* アンカーの文字を消したい時に使用 */
}

.bgChange a{
    display : block ;
    width : 100px ;
    height : 100px ;
}

.bgChange a:link{
    background-image : url(sample3.jpg) ;
}

.bgChange a:visited{
    background-image : url(sample3.jpg) ;
}

.bgChange a:hover{
    background-image : url(sample3.jpg) ;
    background-position:0px 100px;
}

一般的に前者より後者の書き方のほうが読み込みは早いのですが、環境によっては後者でも読み込みが遅く感じることがあります。
その場合は、JavaScriptを使用します。
これが一番早く読み込めます。
JavaScriptで背景画像を切り替える方法は次回説明します。
お楽しみに。

投稿日:2006年11月23日 | 編集

« 前の記事 | webコラムのトップへ | 次の記事 »

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。