javascript - 使用 javascript 更改图像源

Question

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

使用 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');"/>