【JavaScript】触れる・クリックの両方で2枚の画像を切り替える方法【PC・スマホ対応】

AとBの2枚の画像を、触れる、クリック、またはその両方で切り替える方法を紹介します。
コピペで簡単に実装できます！

2枚の画像を用意

画像A
画像A
画像B
画像B

切り替えたいAとBの2枚の画像を用意します。サイズは違っても構いませんが、アスペクト比を合わせておく必要があります。

画像に触れると切り替え

サンプル

デフォルトは画像Aを表示。マウスが乗ると画像Bに切り替わり、マウスを離すと画像Aに戻ります。

スマホなどのタッチデバイスでは、マウスが乗るonmouseoverはタッチしたときに発動しますが、マウスを離すonmouseoutに相当する動作はありません。つまり、一度タッチで画像Bに切り替わった後、画像Aに戻らず、一生画像Bのままです。

HTMLコード

<span onmouseover="this.querySelector('img').src = 'b.jpg';"
      onmouseout="this.querySelector('img').src = 'a.jpg';">
    <img src="a.jpg" width="150px">
</span>

画像のサイズを変更したい場合は、width="150px"の値を調整します。

画像をクリックするたびに切り替え

サンプル

デフォルトは画像Aを表示。クリックするたびに画像B→画像A→画像B…と繰り返します。

これはPCとスマホで同じ挙動になります。

HTMLコード

<span onclick="var img = this.querySelector('img'); 
    img.src = img.src.endsWith('a.jpg') ? 'b.jpg' : 'a.jpg';">
    <img src="a.jpg" width="150px">
</span>

ここでのendsWith('a.jpg')は、ディレクトリのパスを参照しているわけではなく、現在の画像のファイル名が「a.jpg」で終わっているかを確認しています。これにより、画像がa.jpgであればb.jpgに切り替え、そうでなければa.jpgに戻すことができます。

フルURLを使用する例

<span onclick="var img = this.querySelector('img'); 
    img.src = img.src.endsWith('a.jpg') ? 'https://example.com/images/b.jpg' : 'https://example.com/images/a.jpg';">
    <img src="https://example.com/images/a.jpg" width="150px">
</span>

フルURLを使う場合は、https://example.com/images/ の部分を適切なパスに変更します。

ポイントは、endsWith('a.jpg')にフルURLは入れないこと。これは検索ワードのようなものなので、ファイル名の部分だけでOKです。

画像のサイズを変更したい場合は、width="150px" の値を調整します。

PCでは画像に触れる・スマホでは画像にタッチで切り替え

サンプル

PCとスマホ（タッチデバイス）で条件を分岐させるパターンです。

PCでは「画像に触れると切り替え」、
スマホでは「画像をクリックするたびに切り替え」を行います。

この場合、PCとスマホの分岐させつつ、各デバイスでのイベントを処理する必要があり、HTML内だけの処理では難しいです。そのため、JavaScriptを使用して複雑な動作を実現します。

JavaScriptコード

<script>
(function() {
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const events = isTouchDevice ? ['click'] : ['mouseover', 'mouseout'];

    function handleImageEvent(event) {
        const img = event.target;
        const [srcA, srcB] = [img.dataset.srcA, img.dataset.srcB];

        if (event.type === 'click') {
            img.src = img.src.includes(srcA) ? srcB : srcA;
        } else if (event.type === 'mouseover') {
            img.src = srcB;
        } else if (event.type === 'mouseout') {
            img.src = srcA;
        }
    }

    document.querySelectorAll('.kirikae-img').forEach(img => {
        events.forEach(event => img.addEventListener(event, handleImageEvent));
    });
})();
</script>

JavaScriptコードは</body>の前に入れます。

HTMLコード

<img src="a.jpg" class="kirikae-img" data-src-a="a.jpg" data-src-b="b.jpg" width="150px">

<imgにclass="kirikae-img"を指定すれば、他の画像にも動作を適用できます。

例えば、inu.jpgとneko.jpgを切り替えたい場合は以下のように書きます。

<img src="inu.jpg" class="kirikae-img" data-src-a="inu.jpg" data-src-b="neko.jpg" width="150px">

画像のサイズを変更したい場合は、width="150px" の値を調整します。

画像に触れる・クリックのどちらでも切り替え

サンプル

PCではマウスが乗る・マウスが離れる・クリックのいずれの動作でも画像が切り替わります。つまり全盛りの挙動です。
スマホでは「画像をクリックするたびに切り替え」を行います。

JavaScriptコード

<script>
(function() {
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const events = isTouchDevice ? ['click'] : ['mouseover', 'mouseout', 'click'];

    function handleImageEvent(event) {
        const img = event.target;
        const [srcA, srcB] = [img.dataset.srcA, img.dataset.srcB];

        if (event.type === 'click') {
            img.src = img.src.includes(srcA) ? srcB : srcA;
        } else if (event.type === 'mouseover') {
            img.src = srcB;
        } else if (event.type === 'mouseout') {
            img.src = srcA;
        }
    }

    document.querySelectorAll('.kirikae-img').forEach(img => {
        events.forEach(event => img.addEventListener(event, handleImageEvent));
    });
})();
</script>

JavaScriptコードは</body>の前に入れます。

HTMLコード

<img src="a.jpg" class="kirikae-img" data-src-a="a.jpg" data-src-b="b.jpg" width="150px">

画像のサイズを変更したい場合は、width="150px" の値を調整します。

-JavaScript