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

Answer 2

您可能需要检查以确保路径正确：

"/templates/articulistas/images/" + this.id + ".gif";

这看起来可能是一个相对路径，因此您需要将其更改为../templates/articulistas/images/" + this.id + ".gif";，假设它是正确的相对路径。

此外，您需要正确映射函数中的参数：

function mouseOverImage(object) // Accepting an object as argument.
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + ".gif";
                        }
   function mouseOutImage(object)
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + "-off.gif";
   }

在鼠标悬停时更改图像的通用功能

2 个答案: