pulling data from an array (last defined data overwrites all others)
<p>Okay...probably an easy solution here but I'm at my wits end...</p>

<p>So I've got a array that is meant to house several functions that change the "href" attribute of an Raphael object. I've got a click function that iterates through the array and I believe I'm calling the data correctly (for instance, if I just pass the array a set of strings and add console.log(i) then it correctly iterates through everything. Unfortunately, once I change things to my img.attr("href","example.jpg") it stops working and only the last data defined is accessed... </p>

<p>Anyway, that's the best way I can express the problem... I'll copy the code. Any help would be much appreciated.</p>

<pre><code>// JavaScript Document

window.onload = function() { 

    var paper = new Raphael(document.getElementById('HEADER'), 1024, 538);  
    var img = paper.image("wp-content/themes/HEGGE-Theme/images/Hegge-Design_REEL.png", 310, 150, 400, 400),
    angle = 0;
    var lever = paper.image("wp-content/themes/HEGGE-Theme/images/Hegge-Design_Lever.png", 683, 190, 170, 170);
    lever.node.onmouseover = function() {  
        this.style.cursor = 'pointer';  
    }
    var links = [
      img.attr("href","wp-content/themes/HEGGE-Theme/images/Viewmaster.jpg"),
      img.attr("href","wp-content/themes/HEGGE-Theme/images/VM_2.png"),   
    ];

    var i = 0;  

    lever.click(function () {
        angle += 30;
        img.stop("/images/Hegge-Design_REEL.png").animate({transform: "r" + angle}, 1000, 'bounce');
        i++;   
        if (i &gt;= links.length) i = 0;
    });

    $(".link1").colorbox({rel:'nofollow'});

    $('img').click(function() {
        $( this, $('#HEADER').svg () ).addClass ( 'link1' );
    });

    img.node.onmouseover = (function () {
        this.style.cursor = 'pointer';
    });

    img.node.onclick = (function () {
        i;
    });

}
</code></pre>
