title: associative arrays-Display key values with image slider
body: <p>I'm working on designing a website and have an image slider displaying 20 images.</p>
  
  <pre><code>var slideimages = new Array()
  slideimages[0] = new Image()
  slideimages[0].src = "Stadium Images/anfield.jpg"
  slideimages[1] = new Image()
  slideimages[1].src = "Stadium Images/britannia.jpg"
  slideimages[2] = new Image()
  slideimages[2].src = "Stadium Images/oldtrafford.jpg"
  
  &lt;img src = "anfield.jpg" name = "slide" id = "slide" width  ="500px"        height = "300px"&gt;
      &lt;script type= "text/javascript"&gt;
      var step=0
      function slideit()
      {
          document.getElementById('slide').src = slideimages[step].src
          if (step&lt;19)
              step++
          else
              step=0
              setTimeout("slideit()",2500)
      }
          slideit()
      &lt;/script&gt;
  </code></pre>
  
  <p>I want to make this an associative array where the key in the array is a string of the name of the stadiums and this will change with the change of image. Problem is if I change to an associative array and put in key values this will stop my image slider as you can see with the step variable I am using this is how the method is switching images. Any ideas on if I switch this to an associative how I get the images and keys(which I will display in a h3/h4) to work together</p>
  
  <p>Thanks</p>