Javascript 使用“onmouseover”更改图像

我正在尝试使用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>

<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>

试试这个：-

查找ID为img的元素。要查找当前图像，请尝试

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

以及

---

尝试在JavaScript中执行此操作：

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

---

为我工作

我会这样做，让它更具可扩展性

<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>

---

您使用的是反斜杠而不是正斜杠？我认为您需要在document.getElementByIdimg.src=a；中的img前面加上a；。另外，您没有每个图像的id，因此如何知道要更改哪个图像。@evan.stoddard：只有在JavaScript中使用CSS样式选择器时才需要。要更改的图像是ID为img的图像。哦，好的。我经常使用jQuery，所以我对选定的特定元素使用哈希标记和句点。请尝试使用前斜杠/，而不是后斜杠\。你不需要10.jpg后面的斜杠。你能在changeImage中使用这个.src而不是每次重复url吗？@Chimoo:不，因为mouseover元素是books/big/…，但是传递的src是books/biger/…，就像缩略图和全尺寸一样。虽然.replace可以在changeImage函数中完成。啊，好的，但是是的，replace会更好。这个答案中的代码并没有按照OP的要求执行，因为它传递的是缩略图，而不是更大的缩略图one@Chimoo：原作做得很正确。答案被临时修改为通过this.src，但随后被更改。最新的修订版没有正确地恢复到原来的版本…因为答案被接受，我将它回滚到原来的版本。

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

<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>