Question

我在一个页面上有多张预览照片，我希望每张预览照片都有自己的灯箱，可以放大照片。但是当我在页面上打开第二张照片时，灯箱图像是页面上第一张图像的较大版本。我使用HTML和CSS与最小的java

这是我的HTML代码

<div id="graphic">
<h2><span>Graphic Art</span></h2>
<!--Below is the code for the clickable Sloth Photo with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/graphicart/sloth-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/graphicart/sloth-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>

<div id="Separator">
</div>

<div id="Photo1">
<h2><span>Photography<span></h2>
<!--Below is the code for the clickable photos with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/photography/art-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/photography/art-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>

相应的CSS是：

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 200%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 15%;
left: 20%;
width: 54%;
height: 75%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

Answer 1

CSS很好，请确保所有ID都指向正确的图像。现在你所有的id都指向光明。如果您已将第二个图像ID更改为light2，那么您的灯箱应该可以正常工作。

使用HTML和CSS在单个页面上使用多个灯箱

1 个答案: