单击缩略图更改主图像？答案

【问题标题】：Click Thumbnail to Change Main Image?单击缩略图更改主图像？
【发布时间】：2013-03-22 09:08:20
【问题描述】：

在学习了大约一个月的 JS 并完成了大约 4 门课程之后，我仍然无法弄清楚如何在单击缩略图时更改图像！我想做的很简单，我只想在单击缩略图时更改主图像！在此示例中，一个 div 中有两个缩略图图像，它们上方有一个主图像。我只想在单击缩略图时更改主图像。我知道这是 DOM Manipulation 并认为它是：document.getElementById.....？

我做了一个小页面，以便我可以学习/尝试不同的东西，最后放弃并寻求帮助！代码如下：

#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}

<body>
<div id="MainContainer">
    <div id="MainImage"></div>
    <div id="TNBodyContainer">
        <div id="TNOne">
            <div id="TNTwo"></div>
        </div>
    </div>

非常感谢您的帮助。

马盖特

【问题讨论】：

标签： image

【解决方案1】：

您需要添加一些脚本以在单击任一缩略图时更改图像。该函数在页面加载时调用。更改图像名称以适合。这应该放在html页面的部分。

<script>
window.onload = function() {
        var mainImg = document.getElementById('Main');

        document.getElementById('TNOne').onclick = function() {
                mainImg.src = 'main1.jpg';
                //alert('one clicked');
        };
        document.getElementById('TNTwo').onclick = function() {
                mainImg.src = 'main2.jpg';
                //alert('two clicked');
        };
};
</script>

两个缩略图 div 成为具有相同 ID 的 <img> 标签。类似地，主要的<img> 也被定义（id="Main"）。现在元素是可点击的。

<div id="MainContainer">
    <div id="MainImage">
        <img id="Main" src="MainImage01.jpg"</img>
    </div>
    <div id="TNBodyContainer">
        <img id="TNOne" src="thumb1.jpg"></img>
        <img id="TNTwo" src="thumb2.jpg"></img>
    </div>
</div>

最后是缩略图的 CSS，这里的 float 用于将缩略图保持在 TNBodyContainer div 中的同一行。

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}

【讨论】：

非常感谢您的怀疑。对我来说非常方便。我会保留代码，因为我需要从中学习。很高兴你能帮助我:)
@Margate 没问题 - 提供答案很有趣。如果您认为 Daniel 和/或我提供的解决方案是有益的，您可以随时通过给我们投票来表达您的感激之情。

【解决方案2】：

要改变CSS背景属性中的图片，需要使用

document.getElementById("MainImage").style.background

正确的做法是添加事件监听器：

 document.getElementById("TNOne").addEventListener("click", function (event) {
          setImage(event);
      }, false);
      document.getElementById("TNTwo").addEventListener("click", function (event) {
          setImage(event);
      }, false);

  }

它们都调用了相同的函数，但是通过 event 可以通过“event.target.id”查看哪个“点击”了。

然后，您可以决定要执行的操作，例如 switch 语句。基本上说：如果 event.target.id == "TNOne"。

你可以看到我给你做的这一切：http://jsfiddle.net/djwave28/32pQD/3/

您的 HTML 和 CSS 也有一些细微的变化。

【讨论】：

非常感谢 Daniel 的回答以及在 jsfiddle 中花费的时间。我已经复制了代码并将用它来学习/解决我的问题！需要做更多的课程！
不客气 :-) ... 去过那里，学习需要时间。 @suspectus 提供的解决方案可能同样有效。更多信息就在这里：stackoverflow.com/questions/6348494/addeventlistener-vs-onclick祝你好运！