Javascript 用于更改鼠标上方图像的通用函数

我正在尝试制作一个通用脚本来更改mouseover和mouseout上的图像

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

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

函数mouseOverImage（）
{
document.getElementById（this.id）.src=“/templates/articulistas/images/”+this.id+”.gif”；
}
函数mouseOutImage（）
{
document.getElementById（this.id）.src=“/templates/articulistas/images/”+this.id+“-off.gif”；
}

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>

---

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

“/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";
   }

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

“/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";
   }

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

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

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

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

我更改为完整路径，但它给了我相同的错误
TypeError:document.getElementById（this.id）为null
@LucasMatos您正在进行的内联调用的HTML是什么？你能发布元素的代码吗？@LucasMatos谢谢，我已经对我的答案做了相应的补充。基本上，函数定义没有设置参数。谢谢！成功了。另一个答案也有效。那么，哪一个是最佳答案？@LucasMatos我看了aroth的答案，我们的两个解决方案几乎相同。最重要的是要记住用正确的参数映射函数调用。我更改为完整路径，但它给了我相同的错误
TypeError:document.getElementById（this.id）为null
@LucasMatos您正在进行的内联调用的HTML是什么？你能发布元素的代码吗？@LucasMatos谢谢，我已经对我的答案做了相应的补充。基本上，函数定义没有设置参数。谢谢！成功了。另一个答案也有效。那么，哪一个是最佳答案？@LucasMatos我看了aroth的答案，我们的两个解决方案几乎相同。最重要的是要记住用正确的参数映射函数调用。好的，但是如何使这个函数通用？因此，我可以对所有图像使用相同的函数。。使用图像id…@LucasMatos-如果您遵循小提琴中使用的模式，只需将显示
this.id
的部分替换为
image.id
。谢谢！成功了。另一个答案也有效。那么，哪一个是最佳答案？@LucasMatos-两个答案解决问题的方式相同，因此它们本质上是等价的。我的示例非常简洁，因为它缓存了原始图像URL，而不是在
mouseout
处理程序中重新计算它，并且Stegrex的回答对原始代码的更改更少。好的，但是如何使此函数通用？因此，我可以对所有图像使用相同的函数。。使用图像id…@LucasMatos-如果您遵循小提琴中使用的模式，只需将显示
this.id
的部分替换为
image.id
。谢谢！成功了。另一个答案也有效。那么，哪一个是最佳答案？@LucasMatos-两个答案解决问题的方式相同，因此它们本质上是等价的。我的示例非常简洁，因为它缓存了原始图像URL，而不是在
mouseout
处理程序中重新计算，而且Stegrex的答案对原始代码的更改更少。