title: How do I loop through images with Previous/Next buttons?
body: <p>I was able to get the images to loop through but now when I click on either the 'Previous' or 'Next' link, my file folder where I have my images stored pops up, every time. Any idea as to why this is happening or how to stop it?</p>
  
  <p><strong>THE SCRIPT</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              /* &lt;![CDATA[ */
                  function changeDisplay(curLine) {
                      curLine.style.color = "red";
                      curLine.style.fontWeight = "bold";
                  }
  
                  function restoreDisplay(curLine) {
                      curLine.style.color = "blue";
                      curLine.style.fontWeight = "normal";
                  }
  
                  var curImage = 1;
  
                  function changeImage(which) {
                      for (var i=0; i &lt; 5; ++i) {
                          document.getElementById("image"+i).style.display = "none";
                      }
                      if (which &lt; 1) 
                          which = 5;
                      if (which &gt; 5)
                          which = 1;
                      document.getElementById("image"+which).style.display = "block";
                      curImage = which;
                  }
              /* ]]&gt; */
              &lt;/script&gt;
  </code></pre>
  
  <p><strong>THE HTML</strong></p>
  
  <pre><code>     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
          &lt;link type="text/css" rel="stylesheet" href="project.css" /&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;table style="border:none" class="menu"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;a href="Index.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)"&gt;Home&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="menupipe"&gt;|&lt;/td&gt;
                      &lt;td&gt;&lt;a href="Specials.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)"&gt;Specials&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="menupipe"&gt;|&lt;/td&gt;
                      &lt;td&gt;&lt;a href="Tools.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)"&gt;Tools&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="menupipe"&gt;|&lt;/td&gt;
                      &lt;td&gt;&lt;a href="Prices.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)"&gt;Prices&lt;/a&gt;&lt;/td&gt;
                      &lt;td class="menupipe"&gt;|&lt;/td&gt;
                      &lt;td&gt;&lt;a href="Order.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)"&gt;Shop&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p style="font-weight:bold; font-size:20px"&gt;With winter approaching, every homeowner wants to be prepared for the snow and ice! We are now running a sale on a few items that will help handle the harsh winter conditions. Take a look at our prices and make sure you stock up. Click on the images below for more information.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="image" style="display:block"&gt;
              &lt;img src="images/deicer.jpg" height="300" width="300" alt="deicer" /&gt;
          &lt;/div&gt;
          &lt;div id="image" style="display:none"&gt;
              &lt;img src="images/snowblower.jpg" height="300px" width="300px" alt="snowblower" /&gt;
          &lt;/div&gt;
          &lt;div id="image" style="display:none"&gt;
              &lt;img src="images/icemelt.jpg" height="300px" width="250px" alt="icemelt" /&gt;
          &lt;/div&gt;
          &lt;div id="image" style="display:none"&gt;
              &lt;img src="images/shovel.jpg" height="225px" width="225px" alt="shovel" /&gt;
          &lt;/div&gt;
          &lt;div id="image" style="display:none"&gt;
              &lt;img src="images/scraper.jpg" height="124" width="124" alt="scraper" /&gt;
          &lt;/div&gt;
          &lt;button type="button" onclick="changeImage(curImage - 1)"&gt;Previous&lt;/button&gt;
          &lt;button type="button" onclick="changeImage(curImage + 1)"&gt;Next&lt;/button&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>