サムネイルをマウスオーバーで拡大画像の切り替えをし、マウスアウトで元に戻す又はクリックで確定させたい

実現したいこと

サムネイルをマウスオーバーで拡大画像の切り替えをし、クリックで確定させたいです（マウスアウトしても切り替え後の画像のまま）。
もし、サムネをクリックしない場合は、マウスアウトで切り替わる前の画像に戻したいです。

▼イメージ画像

発生している問題

▼参考）サムネ画像をマウスオーバーしてメイン画像の切り替え方を解説
https://newsite-make.com/javascript-mainimg-change/
▼上記参考サイトのDemoページ
https://hayata19791218.github.io/javascript-mouseover-mainimg/

上記サイトを参考に実装してみましたが、
①サムネを「クリック」で画像切り替え（「マウスオーバー」しても変化なし）
②サムネを「マウスオーバー」での画像切り替え（「クリック」しても変化なし）
↑①と②のどちらかしかできす、困っております。。

クリックとマウスオーバーを両立させる方法がありましたら、
教えていただけませんでしょうか。

よろしくお願いいたします。

▼ソースコード


<style>
        nav ul {
            list-style: none;
        }
        
        blockquote,
        q {
            quotes: none;
        }
        
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none;
        }
        
        a {
            margin: 0;
            padding: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
            text-decoration: none;
        }
        
        del {
            text-decoration: line-through;
        }
        
        abbr[title],
        dfn[title] {
            border-bottom: 1px dotted;
            cursor: help;
        }
        
        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #cccccc;
            margin: 1em 0;
            padding: 0;
        }
        
        input,
        select {
            vertical-align: middle;
        }
        
        p,
        .nav {
            margin: 0;
        }
        
        section img {
            max-width: 100%;
        }
        
        .center {
            margin: 0 auto;
            width: fit-content;
        }
        
        .center ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .center li {
            margin-right: 8px;
        }
        
        li:last-of-type {
            margin-right: 0;
        }
        
        .thumb {
            width: 150px;
        }
</style>


    <div class="center">
        <div>
            <img src="http://placehold.jp/3d4070/ffffff/640x425.png?text=1" id="bigimg" data-image="http://placehold.jp/3d4070/ffffff/640x425.png?text=1">
        </div>
        <ul>
            <li><img src="http://placehold.jp/3d4070/ffffff/640x425.png?text=1" class="thumb" data-image="http://placehold.jp/3d4070/ffffff/640x425.png?text=1"></li>
            <li><img src="http://placehold.jp/3d4070/ffffff/640x425.png?text=2" class="thumb" data-image="http://placehold.jp/3d4070/ffffff/640x425.png?text=2"></li>
            <li><img src="http://placehold.jp/3d4070/ffffff/640x425.png?text=3" class="thumb" data-image="http://placehold.jp/3d4070/ffffff/640x425.png?text=3"></li>
        </ul>
    </div>
    <script>
        const thumbs = document.querySelectorAll('.thumb');

        thumbs.forEach(function(img, index) {

            const mainImg = document.getElementById('bigimg');

            img.onmouseover = function() {
                mainImg.src = this.dataset.image;
            }

            img.onmouseleave = function() {
                mainImg.src = "http://placehold.jp/3d4070/ffffff/640x425.png?text=1"
            }
        });
    </script>

試したこと

ソース内に、以下のコードを挿入してみましたが、
「クリック」と「マウスオーバー」を
両立させることができませんでした。

img.onclick = function() {
mainImg.src = this.dataset.image;
}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょう。

JavaScript
1const thumbs = document.querySelectorAll(".thumb");
2
3thumbs.forEach(function (img, index) {
4  const mainImg = document.getElementById("bigimg");
5
6  img.onmouseover = function() {
7    mainImg.src = this.dataset.image;
8  };
9  img.onmouseleave = function() {
10    mainImg.src = mainImg.dataset.image;
11  };
12  img.onclick = function() {
13    mainImg.dataset.image = this.dataset.image;
14  };
15});