当缩略图悬停在一页中的所有产品时替换主图像

问题描述

在我的类别产品页面上，我想在缩略图悬停时替换主图像一页中的所有产品。

请看这里： newchic.com,nike.com

我的 html 代码：

<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','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','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>

解决方法

<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>

,

我添加了一个 ID，我的问题就解决了。

    <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',2);"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg',2);"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg',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',3);"></li>
                <li><img src="thumb2.jpg" alt="red" onmouseover="showImage('large2.jpg',3);"></li>
                <li><img src="thumb3.jpg" alt="orange" onmouseover="showImage('large3.jpg',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>