Question

所以我是javascript的新手，发现这个解决了我的问题：

但这个例子对我不起作用。

<script type="text/javascript">
  function changeImage(a) {
    document.getElementById("img1").src=a;
  }
</script>

并且

<table align=left width="896px" class="tableCategories">
  <tr class="trCategories">
    <td class="tdCategories">
      <img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(Shopping3.png);'/>
    </td>
  </tr>
</table>

因此，如果我点击图像，它不会改变自己。图像的路径是正确的。我做错了什么？

Answer 1

更改

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(Shopping3.png);'/>

要

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage("./icon/menu/Shopping3.png");'/>

更好的javascript函数可以重复使用。试试这个：

function changeImage(obj,img) {
  obj.src = img;
}

以及以下HTML代码：

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(this,"./icon/menu/Shopping3.png");'/>

Answer 2

您需要将Shopping3.png作为字符串传递。

<img id="img1" src="./icon/menu/Essen3.png" onclick="changeImage('Shopping3.png');"/>

使用javascript更改图像源

2 个答案: