html - 图片链接到另一张图片(图片库)

因此，我基本上希望能够单击任何小图像，并将它们显示在它们上方的大图像区域中。像画廊。无论如何，使用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;
}

最佳答案

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