title: How to click through images stored in var in javascript
body: <p>I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.</p>
  
  <p>I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...</p>
  
  <pre><code>&lt;img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();"&gt;
  
  &lt;script language="javascript"&gt;
  function changeImage() {
  
      if (document.getElementById("imgClickAndChange").src =     "images/edited_images/1.jpg") 
      {
          document.getElementById("imgClickAndChange").src =     "images/edited_images/2.jpg";
      }
  }
  &lt;/script&gt;
  
  &lt;script language="javascript"&gt;
  function changeImageAgain() {
  if (document.getElementById("imgClickAndChange").src ==           "images/edited_images/2.jpg") 
      {
      document.getElementById("imgClickAndChange").src =           "images/edited_images/3.jpg";
      }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks</p>
  
  <pre><code>&lt;head&gt;
      &lt;script type="text/javascript"&gt;
  var slideimages = new Array() // create new array to preload images
  slideimages[0] = new Image() // create new instance of image object
  slideimages[0].src = "images/edited_images/1.jpg" // set image src property         to image path, preloading image in the process
  slideimages[1] = new Image()
  slideimages[1].src = "images/edited_images/2.jpg"
  slideimages[2] = new Image()
  slideimages[2].src = "images/edited_images/3.jpg"
  slideimages[3] = new Image()
  slideimages[3].src = "images/edited_images/4.jpg"
  &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();"&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  //variable that will incement through the images
  
  var step=0
  
  function slideit(){
  if (!document.images)
      return
  document.getElementById('imgClickAndChange').src = slideimages[step].src
  if (step&lt;1)
      document.getElementById('imgClickAndChange').src = slideimages[step].src
  if (step&lt;2)
      document.getElementById('imgClickAndChange').src = slideimages[step].src
   if (step&lt;3)
      step++
   else
      step=0
  setTimeout("slideit()",1000)
  }
  
  slideit()
  
  &lt;/script&gt;
  </code></pre>