點擊縮略圖

Question

我已經使用了下面的HTML/JavaScript代碼，使一個網頁的時候，我可以通過點擊縮略圖變化較大的圖像改變與JavaScript的一個大的圖像：

<script type="text/javascript"> 
    function ChangeImage(a) { 
    document.getElementById("viewer").src = a; 
    } 
</script> 

<section> 
    <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot1.JPG" onclick="ChangeImage("/images/FormalHeadshot1.JPG");"> 
    <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot2.JPG" onclick="ChangeImage("/images/FormalHeadshot2.JPG");"> 
    <img class="thumbnail" src="/images/Thumbnails/Performing.JPG" onclick="ChangeImage("/images/Performing.JPG");"> 
    <img class="thumbnail" src="/images/Thumbnails/Playing.JPG" onclick="ChangeImage("/images/Playing.JPG");"> 
    <img class="thumbnail" src="/images/Thumbnails/InformalHeadshot.JPG" onclick="ChangeImage("/images/InformalHeadshot.JPG");"> 

    <br> 

    <img id="viewer" src="/images/FormalHeadshot1.JPG"> 

</section> 

知道爲什麼當我點擊縮略圖時，大圖不會發生什麼變化？我有點新來JavaScript，所以我可能會錯過一些明顯的東西，但我所做的研究似乎沒有解決問題。

Answer 1

您需要使用單引號而不是雙引號，或者轉義雙引號。

「必須& QUOT;

，或只是一個單引號'

例如，

<img class="thumbnail" src="/images/Thumbnails/FormalHeadshot1.JPG" onclick="ChangeImage('/images/FormalHeadshot1.JPG');"> 

Answer 2

只有你已經調用標籤img的，只能調用ID觀衆哪些是最後一個，這些標記img沒有onclick ChangeImage。對於其他標記，您需要爲每個標記生成不同的ID並調用類標記。

Answer 3

嘗試把你的JS代碼放在這個html下面。

Answer 4

這是代碼。

<script type="text/javascript"> 
    function ChangeImage(a) { 
     document.getElementById("viewer").src = a; 
    } 
</script> 
<section> 
    <img class="thumbnail" src="http://goo.gl/Cdfnd" onclick="ChangeImage('http://goo.gl/phiUS');" /> 
    <img class="thumbnail" src="http://goo.gl/VmUjM" onclick="ChangeImage('http://goo.gl/YLr0i');" /> 
    <!-- 
    More images here 
    --> 
    <br/> 
    <img id="viewer" src="http://goo.gl/phiUS" /> 
</section> 

這裏是的jsfiddle只是櫃面http://jsfiddle.net/99V75/show/