Question

我发现自己正在学习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没有运气。有帮助吗？建议？

Answer 1

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

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

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

Answer 2

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

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

使用javascript交换图像

2 个答案: