How to change the href attribute using prototype js?

Question

I have this php code..

    <?php
        $a_source = $this->helper('catalog/image')->init($_product, 'image');
        $_img_a = '<a id="swapper" class="thickbox" href="'.$a_source.'" title="'.$this->htmlEscape($this->getImageLabel()).'">';
        $_img_b = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
    ?>

I want to change the value of href using prototype..

$('swapper').writeAttribute('href', url);

but it won't change.. Am I missing something here? thanks! by the way here's the whole code from magento media.phtml

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $_gallery = $this->getGalleryImages();

    $_resize = 350;
?>

<style type="text/css">
    .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; }
</style>

<script type="text/javascript">
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;
}
</script>


<p class="product-image-zoom">

    <?php
        $a_source = $this->helper('catalog/image')->init($_product, 'image');
        $_img_a = '<a id="swapper" class="thickbox" href="'.$a_source.'" title="'.$this->htmlEscape($this->getImageLabel()).'">';
        $_img_b = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
    ?>

    <?php echo $_helper->productAttribute($_product, $_img_a.$_img_b, 'image') ?>
    <img id="slide-loader" src="<?php echo $this->getSkinUrl('images/lightbox/loading.gif') ?>" />

</p>

<?php if (count($_gallery) > 0): ?>
<div class="more-views">
    <h4><?php echo $this->__('More Views') ?></h4>
    <ul>
    <?php foreach ($_gallery as $_image): ?>
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" onclick="slide('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) ?>',<?php echo ($s = isset($s) ? ++$s : 0) ?>,'<?php echo $this->getGalleryUrl($_image) ?>'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(65); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

        </li>
    <?php endforeach; ?>
    </ul>
</div>

<?php endif; ?>

Solution

It should be setAttribute:

$('swapper').setAttribute('href', url);

You can directly access the href attribute like this:

$('swapper').href = url;

Try them here.

Comments

[Christian Young]

thanks for answering so quickly.. i tried it with $('swapper').setAttribute('href', url); but still wont change.. maybe it wont run because of this... $('image').writeAttribute('src',url).setOpacity(1).observe('‌​click',function() because the link wraps the image tag..