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

为我工作。