为外部 JavaScript 文件中的许多图像实现鼠标悬停/鼠标退出

Question

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

最初我有这个：

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

外部 JS 文件：

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

这有几个问题：

1. 此方法适用于IE，但由于某种原因，Chrome onMouseOut不起作用，因此悬停图像仍然存在。

2. 需要一些内联的JavaScript。我正在尝试消除所有内联 JS。

3. 要求我为页面上的每个图像硬编码图像路径。

由于所有图像路径都相同并遵循相同的命名约定，因此只是

"图像/图像 ID.png"或"图像/ImageID_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'; }

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

我考虑过使用没有JS的content：hover，但它在IE中不受支持。

Answer 1

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

(function(window, document, undefined)
{
var images = document.getElementsByClassName('hoverImage');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('mouseover', imageMouseOver, false);
images[i].addEventListener('mouseout', imageMouseOut, false);
}
})(window, window.document);
function imageMouseOver(event)
{
event = event || window.event;
var image = event.target;
image.src = getNewImagePath(image.src);
console.log(image);
}
function imageMouseOut(event)
{
event = event || window.event;
var image = event.target;
image.src = getNewImagePath(image.src);
console.log(image);
}
function getNewImagePath(path)
{
var newPath;
if (path.indexOf('_Hover') === -1) {
newPath = path.replace('.png', '_Hover.png');
} else {
newPath = path.replace('_Hover', '');
}

return newPath;
}

.hoverImage {
width: 50px;
height: 50px;
}

<img id="1" src="images/1.png" alt="Employee Profile" class="hoverImage">
<img id="2" src="images/2.png" alt="Employee Profile" class="hoverImage">
<img id="3" src="images/3.png" alt="Employee Profile" class="hoverImage">