title: Cannot get multiple links to change single rollover to work
body: <p>I can't get multiple links to work I keep getting Uncaught Reference Error:Cannot set property "imgToChange" of null(...) Could someone please tell me where I am going wrong.</p>
  
  <pre><code>"use strict";
  window.onload = rolloverInit;
  function rolloverInit() {
      for(var i = 0;i&lt;document.links.length;i++) {
          var linkObj =document.links[i];
          if(linkObj,"id") {
              var linkObj =document.getElementById(linkObj.caption);
              if("imgObj") {
                  setupRollover(linkObj,"imgObj");
              }
          }
      }
  }
  function setupRollover(theLink,theImage) {
      theLink.imgToChange = theImage;
      theLink.onmouseout = function() {
          this.imgToChange.src = this.outImage.src;
      }
      theLink.onmouseover = function () {
          this.imgToChange.src = this.overImage.src;
      }
      theLink.outImage = new Image();
      theLink.outImage = textImage.src;
      theLink.overImage = new Image();
      theLink.overImage.src = "images/" + theLink.id + "Text.gif";
  }
   function setupRollover(theLink,australia) {
      theLink.imgToChange = "australiamap";
      theLink.onmouseout = function () {
          this.imgToChange.src = this.outImage.src;
      }
      theLink.onmouseover = function() {
          this.imgToChange.src = this.overImage.src;
      }
      theLink.outImage = new Image();
      theLink.outImage = "images/australiamap.jpg";
      theLink.overImage = new Image();
      theLink.overImage.src = "images/" + caption.id + "adelaide5.jpg";
      }
  </code></pre>