title: HTML and Javascript picture change on button click
body: <p>I am trying to get these pictures to swap when the button is pressed, the pictures are local to my computer and need to change in sequence. When I press the button, it just generates a new picture, I need them to interchange</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  var imgs=document.images;
  function changeLight() {
      var firstImage = imgs[0].src + "";
      for(var i=0; i&lt;imgs.length-1; i++){
          imgs[i].src=imgs[i+1].src+"";
      }
      imgs[imgs.length-1].src=firstImage;
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="splash"&gt;
  &lt;img src="Traffic Light Red.gif" alt="" id="mainImg"&gt;
  
  &lt;/div&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div&gt;
      &lt;img id="image" src="images/test" /&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;button id="clickme" onclick="changeLight();"&gt;Click to change&lt;/button&gt;
  
  
      &lt;img src="Traffic Light Yellow.gif" hidden /&gt;
      &lt;img src="Traffic Light Green.gif" hidden /&gt;
      &lt;img src="Traffic Light Yellow2.gif" hidden /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>