我的簡單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

回答

相關問題