在预览中更改图片描述
在预览中更改图片描述
提问于 2017-05-18 18:34:17
我现在正在为我在学校的项目创建一个图片库。我遇到了一个问题，我不知道如何添加图片描述，只在大预览图片下显示，而不是在顶部的小图片旁边显示。每一张小图片都会有不同的描述。我自己尝试了一些东西，但我失败得很痛苦，我对这一切还是个新手:)
对这个问题有什么解决方案吗？
<head>
<title>Gallery</title>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body background="cosmic.jpg">
<div class="gallery" align="center">
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png" />
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
</div>回答 2
Stack Overflow用户
发布于 2017-05-18 18:41:23
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>或
<div class="smallpics">
<img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
function showInBig(element){
document.getElementById('bigpic').setAttribute('src',element.getAttribute('src'));
document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}考虑到小图像的alt是描述。
Stack Overflow用户
发布于 2017-05-18 18:44:46
第一件事是清理你的超文本标记语言并分离出JavaScript。这有很多好处。它让你的HTML和JS保持分离，而不会把它们搞混。
您的所有onclick代码都可以这样处理：
var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
}, false);现在，让我们考虑添加一个描述。第一个问题是，您将如何存储这些内容，以及与图像的关系？
一个显而易见的解决方案是将它们存储在图片元素的data属性中。因此，正如我们从点击的图片的元素中读取src一样，我们也将从相同的来源读取其描述。
所以我们的元素变成了：
<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />然后你将需要一个描述占位符在大图片区域，所以添加一个段落。
最后，更改上面的JS代码，使其也包含在描述中：
var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44045381
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号