title: Placing multiple images in HTML at once with JavaScript
body: <p><strong>EDIT :</strong> Here's another problem: I can't define each picture's <code>Z-index</code> with the for loop.</p>
  
  <pre><code>function placeImage(x) {
      var div = document.getElementById("div_picture_right");
  
      div.innerHTML = ""; // clear images
  
      for (counter = 1; counter &lt;= x; counter++ ) {
          var image = document.createElement("img");
          image.src = "borboleta/Borboleta" + counter + ".png";
          image.width = "195";
          image.height = "390";
          image.alt = "borboleta" + counter;
          image.id = "imagem" + counter;
          image.position = "relative";
          image.style.zIndex = counter;
          div.appendChild(image);
      }
  };
  
  window.onload = function () {
      placeImage(20);
  };
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;body&gt;
      &lt;div id="div_wrapper"&gt;
          &lt;div id="div_header"&gt;
              &lt;h1&gt;First Project&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="div_picture"&gt;
              &lt;div id="div_picture_left"&gt;&lt;/div&gt;
              &lt;div id="div_picture_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>When checking FireBug, I get this:</strong></p>
  
  <blockquote>
    <p>Error: image corrupt or truncated</p>
  </blockquote>