javascript - 鼠标悬停时更改图像的通用函数

Question

我正在尝试制作一个通用脚本来更改鼠标悬停和鼠标移出时的图像。

这就是我正在尝试的，但它不起作用。

<script language="javascript" type="text/javascript">
   function mouseOverImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + ".gif";
                        }
   function mouseOutImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + "-off.gif";
   }
</script> 

HTML:

<a href="" title="Aumentar o Tamanho da Letra" class="increaseFont">
<img id="aumentar-letra" src="/templates/articulistas/images/aumentar-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>
<a href="" title="Diminuir o Tamanho da Letra" class="decreaseFont">
<img id="diminuir-letra" src="/templates/articulistas/images/diminuir-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>

Answer 1

该代码应该更新图像源，但前提是您将其连接到适当的 img 元素(并且以适当的方式，因为您依赖于 this )。鉴于您上面提到的 document.getElementById(this.id) is null 错误，您没有正确执行此操作。

查看此处的示例，了解将 img 元素与处理函数链接的一种方法:

http://jsfiddle.net/NdJJZ/2