title: Javascript Array Undefined
body: <p>I keep getting the error <code>links[i] is undefined</code>.<br>
  I define it explicitly and yet it keeps giving me that error -- any ideas?</p>
  
  <p>I am trying to do unobtrusive image rolovers on 5 links that I have.</p>
  
  <pre><code>function loadImages(){
      path = 'uploads/Splash-4/nav/'; 
      links = new Array();
  
      for (i=1;i&lt;=5;i++){
          var id = "link-"+i;
          var defaultState = '&lt;img src="' +path+i+'.jpg" border="0" /&gt;';
          links[i] = document.getElementById(id);
  
          // Place all image linksinto anchor
          links[i].innerHTML = defaultState;
  
          // What to do on mouseover
          links[i].onmouseover = function() { 
              links[i].innerHTML = '&lt;img src="' +path+i+'a.jpg" border="0" /&gt;';
          }
          // What to do on mouse oUt
          links[i].onmouseout = function() {
              links[i].innerHTML = defaultState;
          }
      }
  }
  window.onload = loadImages;
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code> &lt;a href="?page=Profile" id="link-1"&gt;&lt;/a&gt;
   &lt;a href="?page=for-sale" id="link-2"&gt;&lt;/a&gt;&lt;br /&gt;
   &lt;a href="?page=testimonials" id="link-3"&gt;&lt;/a&gt;&lt;br /&gt;
   &lt;a href="?page=free-home-appraisal" id="link-4" /&gt;&lt;/a&gt;&lt;br /&gt;
   &lt;a href="?page=contact-me" id="link-5"&gt;&lt;/a&gt;&lt;br /&gt;
  </code></pre>