CODEWITHSUNDEEP
javascriptimageonclicksrc
user2353029
user2353029

Reputation: 1

Changing a large image with JavaScript when clicking a thumbnail image

I have used the following HTML/JavaScript code to make a webpage where I can change a larger image by clicking a thumbnail image:

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

Any idea why when I click the thumbnail images nothing happens to the large picture? I kinda new to JavaScript, so I may be missing something obvious, but research I've done hasn't seemed to solve the problem.

Upvotes: 0

Views: 6341

Answers (3)

Joseph Myers
Joseph Myers

Reputation: 6552

You need to use a single quote inside rather than a double quote, or escape the double quote.

" needs to be &quot;

or just a single quote '

For example,

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

Upvotes: 2

Chandu Dexter
Chandu Dexter

Reputation: 456

Here is the code.

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

Here is the jsFiddle just incase http://jsfiddle.net/99V75/show/

Upvotes: 0

Gianfranco Lemmo
Gianfranco Lemmo

Reputation: 451

Only do you have calling the tag img, only call the id viewer which is the last one and these tag img don't have the onclick ChangeImage. For the other tags you need generator different id for each one and call class tag.

Upvotes: 0

Related Questions