title: How to change the href attribute using prototype js?
body: <p>I have this php code..</p>
  
  <pre><code>    &lt;?php
          $a_source = $this-&gt;helper('catalog/image')-&gt;init($_product, 'image');
          $_img_a = '&lt;a id="swapper" class="thickbox" href="'.$a_source.'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'"&gt;';
          $_img_b = '&lt;img id="image" src="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'image').'" alt="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" /&gt;&lt;/a&gt;';
      ?&gt;
  </code></pre>
  
  <p>I want to change the value of href using prototype..</p>
  
  <pre><code>$('swapper').writeAttribute('href', url);
  </code></pre>
  
  <p>but it won't change.. Am I missing something here? thanks!
  by the way here's the whole code from magento <strong>media.phtml</strong></p>
  
  <pre><code>&lt;?php
      $_product = $this-&gt;getProduct();
      $_helper = $this-&gt;helper('catalog/output');
      $_gallery = $this-&gt;getGalleryImages();
  
      $_resize = 350;
  ?&gt;
  
  &lt;style type="text/css"&gt;
      .product-img-box .more-views li.slide-current a{ border:2px solid #aaa; }
      .product-img-box .product-image-zoom img { cursor: pointer; }
      #slide-loader{ visibility:hidden; position:absolute; top:auto; left:auto; right:2px; bottom:2px; width: 25px; height: 25px; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  function slide(url,num,gallery){
      if (typeof slide.loading == 'undefined') slide.loading = false;
      if(slide.loading) return false;
  
  
      var loader = new Image();
      $(loader).observe('load', function(){
          $('slide-loader').setStyle({'visibility':'hidden'});
  
          $$('div.more-views li').each(function(el,i){
              (i==num) ? el.addClassName('slide-current') : el.removeClassName('slide-current');
          });
  
          var swap_link = new Element
          var dummy = new Element('img', { src: url }).setOpacity(0);
          new Insertion.After('image', dummy);
          new Effect.Opacity(dummy, { duration:.5, from:0, to:1.0 });
          new Effect.Opacity($('image'), { duration:.5, from:1.0, to:0, 
               afterFinish: function(){
  
                  $('image').writeAttribute('src',url).setOpacity(1).observe('click',function(){
                      //Event.stop(e);
                      $('swapper').writeAttribute('href', url);
  
  
                   })
                  dummy.remove();
                  slide.loading = false;
               }
          });
      });
  
      $('slide-loader').setStyle({'visibility':'visible'});
      loader.src=url;
  
      slide.loading = true;
  return false;
  }
  &lt;/script&gt;
  
  
  &lt;p class="product-image-zoom"&gt;
  
      &lt;?php
          $a_source = $this-&gt;helper('catalog/image')-&gt;init($_product, 'image');
          $_img_a = '&lt;a id="swapper" class="thickbox" href="'.$a_source.'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'"&gt;';
          $_img_b = '&lt;img id="image" src="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'image').'" alt="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" /&gt;&lt;/a&gt;';
      ?&gt;
  
      &lt;?php echo $_helper-&gt;productAttribute($_product, $_img_a.$_img_b, 'image') ?&gt;
      &lt;img id="slide-loader" src="&lt;?php echo $this-&gt;getSkinUrl('images/lightbox/loading.gif') ?&gt;" /&gt;
  
  &lt;/p&gt;
  
  &lt;?php if (count($_gallery) &gt; 0): ?&gt;
  &lt;div class="more-views"&gt;
      &lt;h4&gt;&lt;?php echo $this-&gt;__('More Views') ?&gt;&lt;/h4&gt;
      &lt;ul&gt;
      &lt;?php foreach ($_gallery as $_image): ?&gt;
          &lt;li&gt;
              &lt;a href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()); ?&gt;" onclick="slide('&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()) ?&gt;',&lt;?php echo ($s = isset($s) ? ++$s : 0) ?&gt;,'&lt;?php echo $this-&gt;getGalleryUrl($_image) ?&gt;'); return false;"&gt;&lt;img src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile())-&gt;resize(65); ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /&gt;&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;?php endforeach; ?&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;?php endif; ?&gt;
  </code></pre>