title: Javascript Thumbnails Array
body: <p>I'm working on a website that displays pictures with the help of java-script. The way that I have this website set up at the moment, an image is displayed above thumbnail links. The problem is that the thumbnails are showing as broken, even though they send the correct image. Why is it doing that? Any help is appreciated. </p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>var photos = new Array();
  var photoindex = 0;
  
  photos[0]="images/piano.jpg";
  photos[1]="images/guitar.jpg";
  photos[2]="images/studio.jpg";
  photos[3]="images/sheetmusic.jpg";
  
  function backward()
  {
  if (photoindex &gt; 0)
  {
  document.images.p.src = photos[--photoindex];
  }
  }
  
  function forward()
  {
  if (photoindex &lt; photos.length-1)
  {
    document.images.p.src = photos[++photoindex];
  }           
  }
  
  function goto(n)
  {
  if (n &lt; photos.length &amp;&amp; n &gt;= 0)
  {
  photoindex = n;
  document.images.p.src = photos[photoindex];
  }           
  }
  &lt;/script&gt;
  
  &lt;br&gt;
  &lt;div style="text-align:center;left:5px;"&gt;
  &lt;table width="250" border="0" cellpadding="0" cellspacing="0"&gt;
  &lt;tr&gt; 
  &lt;td colspan="3" align="center" valign="top"&gt; 
  &lt;img src="images/weloveweb.png" name="p" width="250" height="188" id="p" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td valign="top"&gt;&lt;a href="javascript: backward();"&gt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;/td&gt;
  &lt;td valign="top" style="text-align: center"&gt; 
  &lt;script type="text/javascript"&gt;
  
  for (i = 0; i &lt; photos.length; i++)
  {
  document.write("&lt;a href=\"javascript: goto(" + i + ");\"&gt;" + "&lt;img src=" + photos[i] + "/&gt;&lt;/a&gt; ");
  } 
  &lt;/script&gt;
  &lt;/td&gt;
  &lt;td valign="top" style="text-align: right"&gt;&lt;a href="javascript: forward();"&gt;&amp;gt;&amp;gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;  
  </code></pre>