我的简单CSS画廊在火狐浏览器中工作，但不是Safari或Chrome

我有一个（非常）简单的CSS图像库，它在firefox中工作，但不是在铬或Safari浏览器，我无法弄清楚为什么...我想图像更改在bix预览框中，当点击较小的缩略图时，我知道这个代码有点混乱买我仍然在学习，我似乎可以弄清楚为什么它会在firefox中工作（我在构建网站时使用），但不是在Safari或Chrome，也将是很好，如果如果用户在iPad上，但我不能得到这两种工作可以使用的图片库...提前为任何帮助我的简单CSS画廊在火狐浏览器中工作，但不是Safari或Chrome

<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; 
} 

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

感谢： - ）

来源

2013-02-16 user2078845

而不是使用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-16 17:48:13 kobigurk

非常感谢你，这是我第一次张贴在这里，你真的帮助我，谢谢你，山姆 – user2078845 2013-02-16 22:22:13

没有问题的，有乐趣！ – kobigurk 2013-02-17 13:39:22

我的简单CSS画廊在火狐浏览器中工作，但不是Safari或Chrome

回答

相关问题