javascript - 单击第一个图像时允许加载第二个图像，同时保持 WR.CSS 样式。

Question

我正在使用来自 W3.CSS 链接的基本 html/css 模板 here

有一个显示图像的部门是这样的:

<div class="w3-third">
<img src="/w3images/boy.jpg" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
<img src="/w3images/man_bench.jpg" style="width:100%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
<img src="/w3images/natureboy.jpg" style="width:100%" onclick="onClick(this)" alt="Nature again.. At its finest!">
</div>

和点击放大图像的javascript

 <!-- Modal for full size images on click-->
  <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
    <span class="w3-button w3-black w3-xlarge w3-display-topright">×</span>
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
      <img id="img01" class="w3-image">
      <p id="caption"></p>
    </div>

如何修改此代码，以便在原始图像上加载另一个图像？

推理:我喜欢这种图像加载方式，并且希望用户点击图像以便加载与第一张图像相关的新的第二张图像。

Answer 1

在您的 html 中:

<img src="/w3images/natureboy.jpg" style="width:100%" onclick="onClick('second-image-ocean')" alt="A boy surrounded by beautiful nature">

<img src="/w3images/ocean.jpg" style="display:none" id="second-image-ocean" alt="This ocean really reminds me of a boy...">

<img src="/w3images/girl_mountain.jpg" style="width:100%" onclick="onClick('second-image-trees')" alt="What a beautiful scenery this sunset">

<img src="/w3images/trees.jpg" style="display:none" id="second-image-trees" alt="These trees really remind me of a girl...">

然后在您的 JavaScript 中将函数 onClick 更改为:

function onClick(id) {
  element = document.getElementById(id);
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}