title: How to put changing image on top of static image? "img ID" breaks image position, "img class" breaks image change function
body: <p>I am trying to make a basic replica HTML gadget that replicates a car radio. Right now, I'm trying to make a changing image on top of my static image. All works fine until I route it to my function.</p>
  
  <p>The below code works with the function just fine, and the image changes, but the image just goes to 0px 0px on top of the image instead of 145x62 inwards:</p>
  
  <pre><code>&lt;img id="theImage" src="images/First.png"&gt;
  </code></pre>
  
  <p>As soon as I change "img id=" to "img class=" the image goes exactly where I want it to ontop of my other image, but the function breaks and nothing changes when I click the "101.1" button.</p>
  
  <p>I've tried using getElementsByClassName but that didn't work either. Am currently at a wall and can't find a solution.</p>
  
  <pre><code>&lt;script src="pause.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function play(){
     var audio = document.getElementById("ONE");
     ONE.play();
     document.getElementById("theImage").src="images/KOSI.png";
     document.getElementById('chgID').innerHTML='KOSI-FM';
     document.getElementById('chgF').innerHTML='101.1';
     document.getElementById('chgCty').innerHTML='Denver, CO';
     document.getElementById('chgInf').innerHTML='KOSI 101.1';
               }
  function playTwo(){
     var audioTwo = document.getElementById("TWO");
     TWO.play();
     document.getElementById("theImage").src="images/KRPX.png";
     document.getElementById('chgID').innerHTML='KRPX-FM';
     document.getElementById('chgF').innerHTML='95.3';
     document.getElementById('chgCty').innerHTML='Wellington, UT';
               }
  
  &lt;/script&gt;
  &lt;audio id="ONE" src="http://live.audio/live" preload="none"&gt;&lt;/audio&gt;
  &lt;audio id="TWO" src="http://live.audio/live" preload="none"&gt;&lt;/audio&gt;
  
  &lt;img src="main.png" usemap="#image-map"&gt;
  &lt;map name="image-map"&gt;
    &lt;area title="ONE" coords="8,328,279,405" shape="rect" onclick="play()"&gt;
    &lt;area title="TWO" coords="286,326,561,417" shape="rect" onclick="playTwo()"&gt;
    &lt;area title="THREE" coords="568,328,840,416" shape="rect"&gt;
    &lt;area title="FOUR" coords="5,417,279,501" shape="rect"&gt;
    &lt;area title="FIVE" coords="286,417,561,496" shape="rect"&gt;
    &lt;area title="SIX" coords="564,418,838,493" shape="rect"&gt;  
  &lt;/map&gt;
  
  
  &lt;style&gt;
  table, th, td {
    border: 1px solid black;
  }
  &lt;/style&gt;
  &lt;table align="right"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Station ID:&lt;/td&gt;
      &lt;td&gt;&lt;div id="chgID"&gt;XXXX-FM&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Freq.:&lt;/td&gt;
      &lt;td&gt;&lt;div id="chgF"&gt;00.0&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;City:&lt;/td&gt;
      &lt;td&gt;&lt;div id="chgCty"&gt;City, ST&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;Info:&lt;/td&gt;
      &lt;td&gt;&lt;div id="chgInf"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;style&gt;
  img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .theImage {
    z-index: 1;
    position: absolute;
    top: 145px;
    right: 62px;
  }
  &lt;/style&gt;
  &lt;img class="theImage" src="images/First.png"&gt;
  </code></pre>