0

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

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

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

2 回答 2

2

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

检查此处的示例以了解将img元素与处理程序函数链接的一种方法：

http://jsfiddle.net/NdJJZ/2

于 2012-10-07T05:41:50.737 回答
1

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

"/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";
   }
于 2012-10-07T05:35:11.540 回答