『CSS / スタイルシートでマウスをのせたときに画像を切り替える』

マウスを乗せたときに画像が切り替わるというあれを実現したいと思いまして、

普通ならJavaScriptで実現するところをCSSに記述したらどうなるのか調べてみました。

問題が2つありました。

なのでそれを記録しておきます。

＜問題その1＞

マウスをのせたときに画像を切り替える処理はどうすれば実現できるか

（ロールオーバー処理、マウスオーバー時のスワップ処理）

＜問題その2＞

ロールオーバー時に画像の読み込みが発生してしまう。画像の先読みはどうすれば実現できるか

（イメージのプリロード処理）

---

解決方法。

＜問題その1＞

CSSファイルのa:hoverを利用すればよい

#image a {
    background:url("image.jpg");
}

#image a:hover {
    background:url("image_swap.jpg");
}

＜問題その2＞

#preloadImages {
    display: none;
    background-image: url("image_swap.jpg");
}

上記に加え、HTML中に <div id="preloadImages"></div> を記述

この他に、切り替え前後の2画像を連結して1つのファイルにしてしまい、a:hover時に画像の表示範囲をずらすというテクニックがありました。

表示範囲をずらすテクニックを使用するときは画像ファイルが1つになるので先読みは必要なくなるというメリットはあるのですが、1ファイルに2つの画像が入っているのは正攻法ではないと思うので、こちらのやり方を推奨します。

---

【参考サイト】

とんでもブログ～プログラマのWeb開発メモ（PHP, CSS, JavaScript）