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

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'; }

这有一些问题：

此方法适用于 IE，但由于某些原因 Chrome onMouseOut 无效，因此悬停图像仍然存在。
需要一些内联 javascript。我正在努力消除所有内联 JS。
需要我为页面上的每张图片硬编码图片路径。

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

'images/ImageID.png' 或 'images/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

我会给所有你想要的悬停效果的图像一个特定的 class 名称。然后你可以获取所有带有 class 的元素，并为 mouseover 和 mouseout 添加事件监听器。我使用当前的 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">

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

Implementing mouseover/mouseout for many images in an external JavaScript file

javascript

html

image

onmouseover

onmouseout