title: Simple JavaScript Image Thumbnail Viewer with clickable enlarge image
body: <p>I am new to JavaScript. I would like to have the preview image be a clickable link to an even larger image in a separate window. Just like Amazon or eBay. Below is the code I have so far and it works great for the mouse over and preview but I can't figure out how to get a clickable link to the enlarged image. Thank you.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Demo&lt;/title&gt;
          &lt;style&gt;
              .preview {
              width:350px;
              height:150px}
  
              .thumb {
              width:125px;
              height:50px}{
              margin-right:3px;}
  
              .normal {
              border:3px solid #000000;}
  
              .selected {
              border:3px solid #ff0000;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img id="0" class="preview normal" src="" alt="preview" /&gt;&lt;br&gt;
          &lt;p&gt;
              &lt;img id="1" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlhOGY1ZjBhY2UyNjMwMjE4MDJjMzZhODM2NGY2OWI=" alt="Red Belt Blk Buckle" onmouseover="preview(this)"/&gt;
              &lt;img id="2" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MzIxOWZhZmQyZTZkZTg1ZDQzYjI4MmIyYzU1MWU2Njg=" alt="Red Belt Nkl Buckle" onmouseover="preview(this)"/&gt;
              &lt;img id="3" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MjlhOTQ1N2Y4OGM2Y2I4OWIzY2I4YjZiMjU2N2MxZmM=" alt="Red Waist" onmouseover="preview(this)"/&gt;
          &lt;p&gt;
              &lt;img id="4" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YjE5MWRmMThhOTE3YWFjMzlkNDcyYzcwMWIxNzRlMWE=" alt="Red Waist" onmouseover="preview(this)"/&gt;
              &lt;img id="5" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlkMzY0YWZkMDUzNjcxNzlkMTRhZTIyZjFmOTk1YTM=" alt="Red Blk Buckle" onmouseover="preview(this)"/&gt;
              &lt;img id="6" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YzdkZjcyZWVkZWQ1Y2Y4NjY2ZDFhY2EzYjU2NDA3OWQ=" alt="Red Nkl Buckle" onmouseover="preview(this)"/&gt;
          &lt;script&gt;
              var lastImg = 1; //Set initial thumbnail and preview
              document.getElementById(0).src = document.getElementById(lastImg).src;
              document.getElementById(lastImg).className = "thumb selected";
  
              function preview(img) {
                  document.getElementById(lastImg).className = "thumb normal";
                  img.className = "thumb selected";
                  document.getElementById(0).src = img.src;
                  lastImg = img.id
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>