title: Creating an array of image objects
body: <p>I'm trying to create an array of image objects, but struggling. Each object will hold an image and a caption for the image.</p>
  
  <p>The following code works fine when I paste it into Firebug for checking:</p>
  
  <p><strong>Example 1</strong></p>
  
  <pre><code>var imageArray = new Array();
  
  imageArray[0] = new Image();
  console.log(imageArray[0]);  //result is &lt;img&gt;
  
  imageArray[0].src = "my-image-01.png";
  console.log(imageArray[0]); // result is &lt;img src="my-image-01.png"/&gt;
  
  imageArray[0] = {imageCaption: "A caption for the image"};  //an object
  console.log(imageArray[0].imageCaption) //result is: A caption for the image
  
  imageArray[1] = new Image()
  </code></pre>
  
  <p>... etc</p>
  
  <p>However, I thought the following would make more sense, but it keeps throwing an error and I can't understand why. </p>
  
  <p><strong>Example 2</strong></p>
  
  <pre><code>var imageArray = new Array();
  
  imageArray[0]= {
      image01: new Image(),
      image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
      imageCaption: "An image caption"
      };
  
  imageArray[1] = {
      image02: new Image().
      image02.src: "my-image-02.png",
      imageCaption: "Another image caption"
      }
  </code></pre>
  
  <p>Can anyone explain what's wrong with the code above? Is the first example I posted, the approach I should use? Many thanks </p>