点击缩略图

我已经使用了下面的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，所以我可能会错过一些明显的东西，但我所做的研究似乎没有解决问题。

来源

2013-05-06 user2353029

您需要使用单引号而不是双引号，或者转义双引号。

“必须& QUOT;

，或只是一个单引号'

例如，

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

来源

2013-05-06 00:23:12

只有你已经调用标签img的，只能调用ID观众哪些是最后一个，这些标记img没有onclick ChangeImage。对于其他标记，您需要为每个标记生成不同的ID并调用类标记。

来源

2013-05-06 00:26:36

尝试把你的JS代码放在这个html下面。

来源

2013-05-06 00:27:09

这是代码。

<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/

来源

2013-05-06 03:57:35

回答

相关问题