1

我有一个（非常）简单的 CSS 图像库，它在 firefox 中工作，但在 chrome 或 safari 上不起作用，我不知道为什么......我希望在单击较小的缩略图时在 bix 预览框中更改图像，我知道这段代码有点乱买我还在学习，我似乎可以弄清楚为什么它可以在 Firefox（我在构建网站时使用）但不能在 safari 或 chrome 中工作，如果图片库可以如果用户在 ipad 上使用，但我不能让它工作......

<htmL>
<div class="contentbox">

<div class="gallery" align="center">
<h3></h3><br/>

<div class="thumbnails">
<img  onClick="preview.src=img1.src"  id="img1" src="gallery/img1.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img2.src" id="img2" src="gallery/img2.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img3.src" id="img3" src="gallery/img3.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img4.src" id="img4" src="gallery/img4.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img5.src" id="img5" src="gallery/img5.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img6.src" id="img6" src="gallery/img6.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img7.src" id="img7" src="gallery/img7.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img8.src" id="img8" src="gallery/img8.jpg" alt="Image Not Loaded"/>
</div><br/>                   

<div class="preview" align="center">
 <img id="preview" src="./gallery/img1.jpg" alt="No Image Loaded"/>
</div>

</div> 

 </div>

</html>

----CSS----

.contentbox {
    width: 1200px;
    height: 790px;
    border: none;
    margin: auto;
    padding-top: 0px;
    margin-top: 40px;
    font-family: champagne; sans-serif; 

}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.thumbnails img:hover {
    border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}

------------

提前感谢您的帮助:-)

4

1 回答 1

0

而不是使用preview.src=img1.src，你应该使用document.getElementById('preview').src=document.getElementById('img1').src。

更好的是，您应该创建一个通用函数：

function setPreviewImage(targetId) {
    document.getElementById('preview').src = document.getElementById(targetId).src 
}

把它放在一个script标签里。然后在每个img元素中像这样使用它：

onclick="setPreviewImage(this.id)"
于 2013-02-16T17:48:13.520 回答