replace main image when a thumbnail image is hover for all products in one page

Question

On my category product page, I want to replace the main image when a thumbnail is hovered for all products in one page .

see here: newchic.com , nike.com

My html code:

<div class="container-fluid">
    <div class="row ">
        <div class="product col ">
            <img src="large1.jpg" id="1" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue');"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red');"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange');" ></li>
            </ul>
        </div>
        <div class="product col ">
            <img src="large1.jpg" id="2" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue');"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red');"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange');" ></li>
            </ul>
        </div>
        <div class=" product col ">
            <img src="large1.jpg" id="3" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue');"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red');"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange');" ></li>
            </ul>
        </div>
    </div>
</div>

<script>
    function showImage(imgPath, imgText) {
        let curImage = document.getElementById('1');
        curImage.src = imgPath;
        curImage.alt = imgText;
        curImage.title = imgText;
    }
</script>

Answer 1

<img src="desert.jpg" id="1" onmouseover="image(this.id)" />
<img src="artic.jpg"  id="2" onmouseover="image(this.id)" />
<img src="sahra.jpg"  id="3" onmouseover="image(this.id)" />

<script>
let lit_img = ['img/Image_1','img/Image_2','img/Image_3']; 
function image(id){
    var img = document.getElementById(id).src = lit_img[id]+".jpg";
}
</script>

Answer 2

I added an ID and my problem was solved.

    <div class="container-fluid">
    <div class="row ">
        <div class="product col ">
            <img src="large1.jpg" id="1" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue', 1);"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red', 1);"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange', 1);" ></li>
            </ul>
        </div>
        <div class="product col ">
            <img src="large1.jpg" id="2" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue', 2);"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red', 2);"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange', 2);" ></li>
            </ul>
        </div>
        <div class=" product col ">
            <img src="large1.jpg" id="3" alt="blue" title="Blue">

            <ul class="colors">
                <li><img src="thumb1.jpg" alt="blue" onmouseover="showImage('large1.jpg','Blue', 3);"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg','Red', 3);"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg','Orange', 3);" ></li>
            </ul>
        </div>
    </div>
</div>

<script>
    function showImage(imgPath, imgText, mainImgId) {
        let curImage = document.getElementById(mainImgId);
        curImage.src = imgPath;
        curImage.alt = imgText;
        curImage.title = imgText;
    }
</script>