Question

所以我基本上希望能够点击任何小图像并让它们显示在它们上方的较大图像区域中。像一个画廊。无论如何，它用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;
}

Answer 1

不，当你想要点击触发的东西时，你必须使用javascript。最接近的是使用鼠标悬停。

Answer 2

您不能仅使用 CSS 。

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

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

Answer 3

不，你不能单独使用当前的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);
});

Answer 4

是的，你可以做到。但是，你需要一点点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>

，输出就像这样

enter image description here

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

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

图像链接到另一个图像（图库）

4 个答案:

Fiddle