javascript - 如何将变化的图像放在静态图像之上？“img ID”破坏图像位置，“img class”破坏图像变化功能

Question

我正在尝试制作一个复制汽车收音机的基本复制 HTML 小工具。现在，我正在尝试在我的静态图像之上制作一个不断变化的图像。一切正常，直到我将它路由到我的函数。

下面的代码可以很好地使用该函数，并且图像会发生变化，但是图像只是转到图像顶部的 0px 0px 而不是 145x62 向内：

<img id="theImage" src="images/First.png">

一旦我将“img id=”更改为“img class=”，图像就会准确地到达我希望它在我的另一个图像之上的位置，但是当我单击“101.1”按钮时，功能会中断并且没有任何变化。

我试过使用 getElementsByClassName ，但也没有用。我目前在墙上，找不到解决方案。

<script src="pause.js"></script>
<script>
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';
             }

</script>
<audio id="ONE" src="http://live.audio/live" preload="none"></audio>
<audio id="TWO" src="http://live.audio/live" preload="none"></audio>

<img src="main.png" usemap="#image-map">
<map name="image-map">
  <area title="ONE" coords="8,328,279,405" shape="rect" onclick="play()">
  <area title="TWO" coords="286,326,561,417" shape="rect" onclick="playTwo()">
  <area title="THREE" coords="568,328,840,416" shape="rect">
  <area title="FOUR" coords="5,417,279,501" shape="rect">
  <area title="FIVE" coords="286,417,561,496" shape="rect">
  <area title="SIX" coords="564,418,838,493" shape="rect">  
</map>


<style>
table, th, td {
  border: 1px solid black;
}
</style>
<table align="right">
  <tr>
    <td></td>
    <th></th>
  </tr>
  <tr>
    <td>Station ID:</td>
    <td><div id="chgID">XXXX-FM</div></td>
  </tr>
  <tr>
    <td>Freq.:</td>
    <td><div id="chgF">00.0</div></td>
  </tr>
  <tr>
    <td>City:</td>
    <td><div id="chgCty">City, ST</div></td>
  </tr>
   <tr>
    <td>Info:</td>
    <td><div id="chgInf"></div></td>
  </tr>
</table>


<style>
img {
  position: absolute;
  top: 0;
  left: 0;
}
.theImage {
  z-index: 1;
  position: absolute;
  top: 145px;
  right: 62px;
}
</style>
<img class="theImage" src="images/First.png">

标签： javascripthtml