javascript - MouseOut 上的图像交换(JavaScript，而不是 JQ)

Question

我正在尝试创建图像鼠标悬停和鼠标移出的功能。棘手的部分是这个函数需要适用于任何图像，而且我不能使用直接的图像名称。因此我必须使用变量。

图像的 HTML 代码如下:

图像的 HTML 是这样的，有 3 个图像:

<img src="images/h1.jpg" alt="" id="images/h4.jpg" onmouseover="swapToNewImage(this)" onmouseout="swapImageBack(this)">

我希望您必须引用新图像的 id，然后在鼠标移开时引用前一个图像的 src 属性。

问题是，如果我引用 id 属性，图像就不再具有 src 属性的信息，因此我无法调用它来恢复。

这是我迄今为止所拥有的 JavaScript。它可以将图像交换为新图像，但不能将其交换回来:(

//FUNCTION 
var $ = function (id) { 
    return document.getElementById(id); 
}           

//ONLOAD EVENT HANDLER      
window.onload = function () {

  //GET ALL IMG TAGS
  var ulTree = $("image_rollovers");
  var imgElements = ulTree.getElementsByTagName("img");
  //PROCESS EACH IMAGE
  //1. GET IMG TAG
  for (var i = 0; i < imgElements.length; i++) {
    console.log (imgElements[i]);
    console.log (imgElements[i].getAttribute("src"));
    //2. PRELOAD IMAGE FROM IMG TAG
    var image = new Image();
    image.setAttribute("src", imgElements[i].getAttribute("src"));
    //3. Mouseover and Mouseout Functions Called    
    image.addEventListener("mouseover", swapToNewImage);
    image.addEventListener("mouseout", swapImageBack);
  } 
}

//MOUSE EVENT FUNCTIONS
var swapToNewImage = function(img) {
  var secondImage = img.getAttribute("id", "src");
  img.src = secondImage;
}

var swapImageBack = function(img) {
  var previousImage = img.getAttribute("src");
  img.src = previousImage;  
}

请告诉我您是否可以帮助我弄清楚如何调用图像的 src 属性，以便将其恢复。再说一遍，我无法引用特定的图像名称，因为那样会容易得多(:谢谢!

Answer 1

好吧，您可以使用数据属性来存储您的 src，并使用数据属性来存储鼠标悬停时要交换的图像。

请尝试以下示例。

var swapToNewImage = function(img) {
  var secondImage = img.dataset.swapSrc
  img.src = secondImage;
}

var swapImageBack = function(img) {
  var previousImage = img.dataset.src
  img.src = previousImage;  
}

<img src="https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" data-src="https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" data-swap-src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"  onmouseover="swapToNewImage(this)" onmouseout="swapImageBack(this)">

我还注意到图像标签是由代码生成的，为了设置数据集值，我们可以这样做:

  var image = new Image();
  image.scr = [src]
  image.dataset.src = [src]
  image.dataset.swapSrc = [swap src]