title: How to show a picture after clicking the thumbnail using Javascript not jQuery?
body: <p>I have found the answer on how to do the same thing with jQuery <a href="https://stackoverflow.com/questions/8121681/how-to-show-hide-big-image-by-clicking-on-thumbnails">How to show/hide big image by clicking on thumbnails?</a>, but I would like to know how to do the same thing with just Javascript.</p>
  
  <p>In jQuery there you can use $(this) to specify that the image that you clicked on should become the bigger image, but is there an equivalent without jQuery?</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;ol&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__01.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__02.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__03.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__04.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__05.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__06.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__07.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__08.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__09.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__10.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__11.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__12.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__13.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__14.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__15.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__16.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__17.jpg" alt=""&gt;
      &lt;/li&gt;
      &lt;li class="thumbs"&gt;
          &lt;img src="images/thumbnails/t__18.jpg" alt=""&gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  &lt;div id="gallery"&gt;&lt;img src="images/thumbnails/t__01.jpg" alt=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was thinking that I could link the li images to a image id using only CSS, but that would mean that if I pressed back, then it would go back to the previous image instead of the previous page. </p>
  
  <p>One way of doing it may be to use  on each image. The changeImage() would then change the current larger image to the one clicked. If the thumb clicked in the active image, then nothing happens. Else change the #gallery img src to the clicked thumbs' src. </p>
  
  <p>I don't know how to convert that into code though.
  Thanks</p>