Onmouseover OnMouseout javascript

时间:2012-08-13 21:38:22

标签: javascript html css

我写了一个脚本,在鼠标悬停在图像上时会改变图像的来源, 起初它工作,但添加第二个使用相同代码的图像后都停止工作。

我遇到的问题是图像在鼠标悬停时不会发生变化。看起来好像没有找到图像 - 但是我确信图像的来源指向正确的路径。

我也要求其他意见,我看不出我做错了什么。我非常感谢您的帮助或对此的任何意见。

以下是我正在使用的代码。

<html>
  <head>
    <script type="text/javascript">
      var images= new Array();
      images[0] = "Benjamin/Untitled-3.png";
      images[1] = "Benjamin/Untitled-4.png";
      images[2] = "Benjamin/Update.png";
      images[3] = "Benjamin/Update2.png";

      function Change()
      {
        document.getElementById("image").src = images[1];
      }

      function GoBack()
      {
        document.getElementById("image").src = images[0];
      }

      function GobackAgain()
      { 
        document.GetElementById("Update").src = images[2];
      }

      function ChangeAgain()
      {
        document.getElementById("Update").src = images[3];
      }
    </script>

    <style type="text/css">
      body
      {
        background-color:#1c1a1a;
      }
    </style>

    <div align="center">
      <img src="Untitled-2.png" width="325" height="191">
    </div>

  </head>

  <body>
    <img onmouseover="Change()" 
         onmouseout="GoBack()" 
         id="image" 
         STYLE="position:absolute; TOP:35%; LEFT:10%; WIDTH:204px; HEIGHT:278px" 
         src="Untitled-3.png">

    <img onmouseover="ChangeAgain()" 
         onmouseout="GoBackAgain()" 
         id="Update" 
         STYLE="position:absolute; TOP:35%; LEFT:50%; WIDTH:204px; HEIGHT:278px" 
         src="Update.png">
  </body>
</html>

2 个答案:

答案 0 :(得分:2)

GobackAgain重命名为GoBackAgain,并将GetElementById替换为getElementById

答案 1 :(得分:0)

这是一个问题:

function GobackAgain()
{ 
    document.GetElementById("Update").src = images[2];
}

如果GetElementById

,则getElementById为{{1}}