允许在第一次单击时加载第二个图像-同时保持WR.CSS样式。
允许在第一次单击时加载第二个图像-同时保持WR.CSS样式。
提问于 2018-01-11 08:37:42
我使用的是W3.CSS链接here中的基本html/css模板
有一个显示图像的分区，如下所示：
<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>
如何修改此代码，以便在原始图像上加载另一个图像？
推理:我喜欢这种风格的图像加载，并希望有用户点击图像，以便新的第二个图像相关的第一个被加载。
回答 1
Stack Overflow用户
发布于 2018-01-11 09:52:06
在您的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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48198272
复制相关文章
相似问题
腾讯云开发者
