title: When using javascript, how do I set the <div> that will change images?
body: <p>Basically, I have an html document that has some static images and images I would like to change on a timer. I've got that working, but the rotating images go to the first <code>&lt;img&gt;</code> in the html, which is supposed to be static. How do I designate where to put the changing images?</p>
  
  <p>This is what I have, and it works - the images change, but not where I want them to.</p>
  
  <pre><code>&lt;html&gt;
  &lt;div id="staticImage"&gt;
      &lt;img src="pic1"&gt;
  &lt;/div&gt;
  
  &lt;div id="changingImage"&gt;
      &lt;img id="changePics"&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;
  
  //My javascript to rotate the images:
  
  var imageArray = [];
  var index = 0;`
  
  function loadImages(){
      imageArray[0] = new Image();
      imageArray[0].src = "img/a.jpg";
      imageArray[1] = new Image();
      imageArray[1].src = "img/b.jpg";
      imageArray[2] = new Image();
      imageArray[2].src = "img/c.jpg";
      imageArray[3] = new Image();
      imageArray[3].src = "img/d.jpg";`
  
      document.images[0].src = imageArray[0].src;}
  
  function rotateImage() {
      index ++
      if (index &gt; 3) {
          index = 0}
      document.images[0].src = imageArray[index].src;}
  
  
  //The javascript always lands in the "staticImage" `&lt;div&gt;`.
  </code></pre>