1つだけ厳選!画像にマウスカーソルを乗せたときにCSSで別の画像に切り替える方法

1つだけ厳選!画像にマウスカーソルを乗せたときにCSSで別の画像に切り替える方法

こんにちわ。近所にボルタリングができる施設を発見したので、いつ行こうかと検討中のTAKA(@web_creativelab)です。

さて、Webサイトを制作するうえで必要になる「マウスカーソルを画像に乗せたときに別の画像に切り替える方法」(俗にいう『マウスオーバー』『マウスホバー』『オンマウス』『ロールオーバー』)の使い方を本日はご紹介したいと思います。

ただ、ひとことに画像を切り替えるといっても、その方法は「CSSを使う方法」「Javascriptを使う方法」など複数存在するので、結局どれ使って切り替えるか迷ってしまいます。
そこで今回は数ある切り替え方法の中から何を使えば迷ないように、僕が1番使う方法を紹介します。

imgタグとCSSで画像を切り替える方法

僕がおすすめする方法は、いつも通り”imgタグ”で画像を表示させて、その画像の背景に”マウスカーソルをのせたときに表示される画像”を表示させておきます。
そしてマウスカーソルをのせたときに、初めにimgタグで表示した画像を透明にすることで、背景として表示した画像が表示される方法です(日本語難しい

HTML

<div class="boulderingBox">
    <a href="#">
        <img src="/img/bouldering_off.png" alt="ボルタリング" height="640" width="480">
    </a>
</div>

CSS

div.boulderingBox a {
    display: block;
    width: 640px;
    height: 480px;
    background: url("/img//bouldering_on.png");
}
div.boulderingBox a img:hover {
    opacity: 0;
}

JavaScriptを使うデメリット

僕が今回JavaScriptを使わなかった理由は2つあります。
1つ目、ブラウザでJavaScriptをオフにしている場合動作しないから。
2つ目、不具合が発生した場合にJavaScriptの簡単な知識がないと修正が難しいことがある。

上記の理由から今回はCSSでの画像切り替えの方法をご紹介しました。
他にも”imgタグ”を使わずに”background属性”だけでオンオフの画像を表示することもできますが”background属性”だけで表示してしまうとブラウザによっては印刷ができないですし、imgタグを使っておいた方がレスポンシブデザインで組みやすかったりするのでこの方法をおすすめします。
まあ環境によって最適な方法は異なるので臨機応変に対応する必要はあります。