图片链接到另一张图片（图片库）答案

【问题标题】：image link to another image(image gallery)图片链接到另一张图片（图片库）
【发布时间】：2014-04-26 18:20:31
【问题描述】：

所以我基本上希望能够单击任何小图像并将它们显示在它们上方的较大图像区域中。就像一个画廊。无论如何它都可以用 HTML/CSS 来做到这一点？

这是我的代码：

HTML

<div class="mainInfo">
<div class="gallery">
    <div class="displayImage">
        <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
    </div>
    <div class="thumbImage">
                    <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>
    </div>

</div>

CSS

.mainInfo {
height: 800px;
background-color:#FCFCFC;
color:#001D5D;
}

 .gallery {
float: left;
}

.thumbImage {
margin-top:575px;
}
 .thumbImage img {
width:140px;
height:auto;
margin-left:15px;
 }
.displayImage {
margin:89px 0 0 177px;
}

.displayImage img {
width:600px;
height:auto;
}

【问题讨论】：

标签： html css image hyperlink

【解决方案1】：

不，当您想要通过点击触发某些内容时，您必须使用 javascript。最接近的方法是使用鼠标悬停。

【讨论】：

【解决方案2】：

是的，你可以做到。但是，这里需要一点 JavaScript。

这里我给你一个你上面写的类似的代码。

<html>
 <head>
 <script>
function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
    }

</script>
<style>
#display{
border:solid 1px blue;
width:90%;
height:60%;
margin:auto;
}
#select{
padding:10% 1% 1% 1%;
width:95%;
height:25%;
mrgin:auto;
}
#display img{
border:solid 1px red;
width:100%;
height:100%;
}
#select img{
border:solid cyan 1px;
floatLleft;
width:50px;
height:25px;
}
#select a{
border:solid green 1px;
}
#select a:hover,a:active{
border:solid yellow 1px;
}
</style>
</head>
<body>
<div id="display">
    <img id="displayimg">
</div>
<div id="select">
<img id="selectimg" src="D:\D drive\147266.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\d1x5u3.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\ct0.jpg" onclick='javascript:display(this)'>
    <img id="selectimg" src="D:\D drive\aftn.jpg" onclick='javascript:display(this)'>
</div>
 </body>

输出会是这样的

这与您的要求一样简单。但是您需要做更多的工作来设计图片库。

如果您想在将鼠标放在图像上时显示图像，只需将 onclick 替换为 onmouseover。

【讨论】：

我现在只是在玩弄它。我在外部文件中有 javascript 并将其链接到 html，但脚本似乎无法正常工作。外部链接时，我还需要向脚本添加什么吗？抱歉对javascript不太了解
您必须将脚本标记更改为<script src="image.js"></script> 并删除
谢谢我弄明白了

【解决方案3】：

您不能仅使用 CSS 来做到这一点。

看看这些网站http://lokeshdhakar.com/projects/lightbox2/和http://fancybox.net/

如果您有足够的Javascript技能或使用任何其他库（例如jQuery - http://jquery.com/) 写在 Javascript 上。

【讨论】：

【解决方案4】：

不，您不能仅使用当前的 HTML 和 CSS 来做到这一点。您可以使用该代码执行的操作是添加一些 javascript 来实现您想要的。

所以，既然你没有提到 javascript 作为一个选项，我假设你不知道如何使用 javascript 来做到这一点，我冒昧地给你写了一个小提琴，这样你就可以弄清楚你的下一个如果您想使用 javascript 执行此操作，请执行此操作。

现在可能看起来很难理解，但是一旦你开始学习真正的 javascript，你就不会觉得需要搜索插件、小部件，甚至不需要帮助你在网页、应用程序等上做任何你想做的事情。

随时要求对代码的任何部分进行解释。

Fiddle

（我没有更改图像，所以它们不会出现。如果您想看一些图像，只需更改它们的src）

Javascript：

var thumbImages = document.getElementsByClassName('thumbImage')[0].children;

[].forEach.call(thumbImages, function (item) {
    item.addEventListener('click', function (e) {
        var gallery = document.getElementsByClassName('displayImage')[0];
        gallery.innerHTML = '';
        gallery.appendChild(e.currentTarget.cloneNode(true));
    }, false);
});

【讨论】：

是的，Matheus，这是一个很好的解决方案。但是，我认为我们需要在将子元素添加到“displayImage”之前删除子元素。否则，appendChild() 将在“displayImage”div 中添加另一个孩子以及您作为孩子已经拥有的孩子。我希望我们必须使用removeChild()。但是请纠正，如果我错了。因为，我也是一个学习者，而不是专家。
我认为它已在 gallery.innerHTML = ' ' 上被删除，但我可能是错的。
哦……对不起，亲爱的……，我没有正确观察它。是的你是对的。不会有这样的问题。谢谢。