为外部JavaScript文件中的许多图像实现mouseover/mouseout

我正在尝试为我的所有图标启用onMouseOver和onMouseOut，并用唯一的图标替换它们

原来我有这个,

<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver()" onMouseOut="mouseOut()">

这方面存在一些问题：

这种方法在IE上有效，但由于某些原因，Chrome onMouseOut不起作用，所以悬停图像仍然存在

需要一些内联javascript。我正试图消除所有的内联JS

需要我为页面上的每个图像硬编码图像路径

因为所有图像路径都是相同的，并且遵循相同的命名约定，这只是

“images/ImageID.png”或“images/ImageID\u Hover.png”

我希望实现这样的东西：

Pseudocode HTML:

<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver(this.id)" OnMouseOut="mouseOut(this.id)">

Pseudocode JavaScript:

function mouseOver(id) { document.getElementById("id").src = 'images/id.png'; }
function mouseOut(id) { document.getElementById("id").src = 'images/id_Hover.png'; }

伪代码HTML:
伪代码JavaScript:
函数mouseOver（id）{document.getElementById（“id”）.src='images/id.png'；}
函数mouseOut（id）{document.getElementById（“id”）.src='images/id_Hover.png'；}

我想将image元素的ID作为参数传递给mouseOver和mouseOut函数，然后在图像路径中使用该ID的字符串文字，这样就不必硬编码每个图像的路径。这样的事情可能吗？有没有一种方法可以在没有内联JS的情况下做到这一点

---

我曾考虑过使用content:hover而不使用JS，但IE中不支持它。

我会为所有想要实现悬停效果的图像指定一个特定的类名。然后，您可以获取该类的所有元素，并为mouseover和mouseout添加事件侦听器。我使用当前的src来确定新的src。您可以同样轻松地使用event.target.id获取id，并使用它来构建src。您还可以构建正则表达式来匹配不仅仅是.png文件

（功能（窗口、文档、未定义）
{
var images=document.getElementsByClassName（'hoverImage'）；
对于（var i=0；i

.hoverImage{
宽度：50px；
高度：50px；
}

将“this”传递到html声明中的函数中，如“onMouseOver=”mouseOver（this）”，然后使用函数mouseOver（img）{}将允许您访问该img信息，您将能够获得id。您还可以利用一些JQuery为img分配一个类并执行$（'.img class'）。每个（函数（）{然后将mouse-over和mouse-out事件绑定到每个单独的img元素}（或者，如果愿意，您可以只执行$（'img'），而不指定类）。这正是我要寻找的，但唯一的问题是自调用函数似乎不起作用。我仍然必须内联调用mouseover和mouseout。我可能缺少一些明显的东西，我分配了class=“hoverImage”每人image@moozin如果像我上面提到的那样使用自调用函数，则必须确保javascript在html之后加载。因此，如果将javascript文件包含在头部而不是正文之后，那么getElementsByClassName将不会返回所需的类列表，因为img标记在该位置不存在int.就是这样。谢谢你的帮助。你觉得如何替换：newPath=path.replace（'.png'，''u Hover.png'）；用newPath=path.replace（'.'，''u Hover'）；这样不仅限于.png文件。当然，默认图像和悬停图像必须仍然是相同的文件类型。

Pseudocode HTML:

<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver(this.id)" OnMouseOut="mouseOut(this.id)">

Pseudocode JavaScript:

function mouseOver(id) { document.getElementById("id").src = 'images/id.png'; }
function mouseOut(id) { document.getElementById("id").src = 'images/id_Hover.png'; }