使用javascript交换图像

时间:2009-12-31 22:47:26

标签: javascript html

我发现自己正在学习web development。我刚刚开始阅读有关javascript的内容。作为一种语言,我没有遇到任何麻烦,但我遇到了一个烦人的情况:

我只是尝试使用我的第一个javascript进行简单的操作:更改<img>的src属性。所以让我们假设我在index.html中有这个代码:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" language="javascript" charset="utf-8">
      function activate(id)
      {
        document.images(id).src ="home-on.jpg";
      }

      function deactivate(id)
      {
        document.images(id).src ="home-off.jpg";
      }
    </script>
  </head>

  <body id="ID">
    <img id="home" src="home-off.jpg"
    onmouseover="activate('home')"
    onmouseout="deactivate('home')"/>
  </body>
</html>

该代码在Google Chrome上完美运行(当鼠标结束时将图像交换出来)。但我对firefox没有运气。有帮助吗?建议?

2 个答案:

答案 0 :(得分:6)

您使用错误的语法来获取图像。

您需要撰写document.images[id](括号[],而不是括号()

document.images集合是一个关联数组,使用括号进行索引 括号用于调用函数;我不知道为什么您的代码在Chrome中有效。

答案 1 :(得分:1)

SLaks为这个特定问题输入了正确答案。

但是,您会发现在JavaScript中有很多这样的情况,其中不正确的语法将在一个浏览器中起作用,但在下一个浏览器中不起作用。为了确保您在JavaScript中保持跨浏览器兼容性,您可能会发现诸如jQuery之类的库非常方便。它不仅试图确保您的JavaScript代码与所有浏览器兼容,而且还扩展了许多强大的功能。