title: Replace image src and a href onclick
body: <p>I've got this little project where I want to swap an image for another, and display the new image in a lightbox.</p>
  
  <p>The code below works as follows; when I click one of the small images, the image src of the large image is replaced with the src of the small image. However, when I click the large image, it still opens the default large image in my lightbox.</p>
  
  <p>Is there any way I can make the hyperlink href get swapped the same way the image src is swapped? They need to get the same value.</p>
  
  <p>The javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function switch1(div) {
          if (document.getElementById('one')) {
              var option=['one','two','three'];
              for(var i=0; i&lt;option.length; i++) {
                  obj=document.getElementById(option[i]);
                  obj.style.display=(option[i]==div)? "block" : "none";
              }
          }
      }
      function switchImg(i){
          document.images["main-image"].src = i;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML/PHP:</p>
  
  <pre><code>&lt;?php
      $image = 'main-image.jpg';
      $small_1 = 'small-image-1.jpg';
      $small_2 = 'small-image-2.jpg';
  ?&gt;
  &lt;div id="holder"&gt;
  &lt;div class="large"&gt;
      &lt;a href="&lt;?php echo $image; ?&gt;" rel="lightbox"&gt;
          &lt;img id="main-image" src="&lt;?php echo $image; ?&gt;" /&gt;
      &lt;/a&gt;
      &lt;a class="original" onclick="switchImg('&lt;?php echo $image; ?&gt;')"&gt;Back to original image&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="small"&gt;
      &lt;a onclick="switchImg('&lt;?php echo $small_1; ?&gt;')"&gt;
          &lt;img src="&lt;?php echo $small_1; ?&gt;" /&gt;
      &lt;/a&gt;
      &lt;a onclick="switchImg('&lt;?php echo $small_2; ?&gt;')"&gt;
          &lt;img src="&lt;?php echo $small_2; ?&gt;" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>