使用“ onmouseover”更改圖像

Question

我正在嘗試使用JavaScript更改圖像src。 不幸的是，這似乎不起作用。 誰能告訴我我在做什么錯？

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

<div class="fill">
<img id="img" src="books\thumbnail\10.jpg\">
<img src='books\big\4.jpg'  onmouseover='changeImage("books\bigger\4.jpg");'>
<img src='books\big\5.jpg'  onmouseover='changeImage("books\bigger\5.jpg");'>
<img src='books\big\6.jpg'  onmouseover='changeImage("books\bigger\6.jpg");'>
</div>

Answer 1

嘗試這個：-

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

<div class="fill">
<img id="img" src="books/thumbnail/10.jpg/">
<img src='books/big/4.jpg'  onmouseover='changeImage("books/bigger/4.jpg");'>
<img src='books/big/5.jpg'  onmouseover='changeImage("books/bigger/5.jpg");'>
<img src='books/big/6.jpg'  onmouseover='changeImage("books/bigger/6.jpg");'>
</div>

Answer 2

這是我的操作方式，使其更具擴展性

<script type="text/javascript">
  function changeImage(img) {
    document.getElementById("img").src = img.src.replace("/big/", "/bigger/");
  }
</script>

<div class="fill">
  <img id="img" src="books/thumbnail/10.jpg">
  <img src='books/big/4.jpg'  onmouseover='changeImage(this)'>
  <img src='books/big/5.jpg'  onmouseover='changeImage(this)'>
  <img src='books/big/6.jpg'  onmouseover='changeImage(this)'>
</div>

Answer 3

document.getElementById("img").src=a;

查找ID為“ img”的元素。 要查找當前圖像，請嘗試

changeImage(this, "books\bigger\4.jpg");

和，

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

Answer 4

嘗試在JavaScript中執行此操作：

document.getElementById("img").onmouseover=changeImage("http://placehold.it/500");

為我工作。