title: Showing an image from an array of images - Javascript
body: <p>I have a large image which is shown on my homepage, and when the user clicks the "next_img" button the large image on the homepage should change to the next image in the array. </p>
  
  <p>However, the next arrow when clicked does nothing, and the main image on the homepage does not change.</p>
  
  <p>I need to do this in javascript.</p>
  
  <p>In the HTML:</p>
  
  <pre><code>&lt;!--Main Content of the page --&gt;
  
  &lt;div id="splash"&gt;
  &lt;img src="images/img/Splash_image1.jpg" alt="" id="mainImg"&gt;
  
  &lt;/div&gt; 
  
  &lt;div id="imglist"&gt;
  &lt;a href="javascript:nextImage('mainImg')"&gt;&lt;img src="images/next_img.png" alt=""&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And then in the javascript file:</p>
  
  <pre><code>var imgArray = new Array();
  
  imgArray[0] = new Image();
  imgArray[0].src = 'images/img/Splash_image1.jpg';
  
  imgArray[1] = new Image();
  imgArray[1].src = 'images/img/Splash_image2.jpg';
  
  imgArray[2] = new Image();
  imgArray[2].src = 'images/img/Splash_image3.jpg';
  
  imgArray[3] = new Image();
  imgArray[3].src = 'images/img/Splash_image4.jpg';
  
  imgArray[4] = new Image();
  imgArray[4].src = 'images/img/Splash_image5.jpg';
  
  imgArray[5] = new Image();
  imgArray[5].src = 'images/img/Splash_image6.jpg';
  
  /*------------------------------------*/
  
  function nextImage(element)
  {
      var img = document.getElementById(element);
  
      for(var i = 0;i&lt;imgArray.length;i++)
      {
          if(imgArray[i] == img)
          {
              if(i == imgArray.length)
              {
                  var j = 0;
                  document.getElementById(element).src = imgArray[j].src;
                  break;
              }
              else
              var j = i + 1;
              document.getElementById(element).src = imgArray[j].src;
              break;
          }
      }   
  }
  </code></pre>
  
  <p>Any help would be appreciated. Thanks.</p>