mouseOver（）と複数の要素で何か問題があります

Question

私は現在、ある種の小さなhtmlゲームで作業しています。

<div id="BS"> 
     <img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" onmouseover="mouseOver()" src="Pictures/BS1.png"/> 
    </div> 
    <script type="text/javascript"> 
      function mouseOver() { 
       document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS2.png" onmouseout="mouseOut()"/>'; 
       } 
      function mouseOut() { 
       document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS1.png" onmouseover="mouseOver()"/>'; 
      } 
    </script> 

    <div id="Radio"> 
     <img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" onmouseover="mouseOver()" src="Pictures/radio1.png"/> 
    </div> 
    <script type="text/javascript"> 
      function mouseOver() { 
       document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio2.png" onmouseout="mouseOut()"/>'; 
       } 
      function mouseOut() { 
       document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio1.png" onmouseover="mouseOver()"/>'; 
      } 
    </script> 

問題は、唯一の最後の項目がコード化された（ここでは、Radio）私はそれに私のカーソルを置いていたときに取り組んでいる： 以下は私のコードです。だから私は不思議だった、これを修正する方法はありますか？私は... 感謝を少なくとも2つの以上の要素を配置する計画をした原因、 ポール

Answer 1

は、あなたが最初のものを上書きしている、両方の関数名mouseOverとmouseOutので、あなたがそれを作成している第二の時間を持っています。 mouseBsOverとmouseRadioOverの名前を付けた場合は、そのように割り当ててください。

<div id="BS"> 
    <img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" onmouseover="mouseBsOver()" src="Pictures/BS1.png"/> 
</div> 
<script type="text/javascript"> 
     function mouseBsOver() { 
      document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS2.png" onmouseout="mouseOut()"/>'; 
      } 
     function mouseBsOut() { 
      document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS1.png" onmouseover="mouseOver()"/>'; 
     } 
</script> 

<div id="Radio"> 
    <img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" onmouseover="mouseRadioOver()" src="Pictures/radio1.png"/> 
</div> 
<script type="text/javascript"> 
     function mouseRadioOver() { 
      document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio2.png" onmouseout="mouseOut()"/>'; 
      } 
     function mouseRadioOut() { 
      document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio1.png" onmouseover="mouseOver()"/>'; 
     } 
</script> 

Answer 2

方法は、それは

function bigImg(x) { 
 
    x.style.height = "64px"; 
 
    x.style.width = "64px"; 
 
} 
 

 
function normalImg(x) { 
 
    x.style.height = "32px"; 
 
    x.style.width = "32px"; 
 
}

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

働くか、それを別の方法を行うことができます

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>