MouseOut 上的图像交换（JavaScript，不是 JQ）答案

【问题标题】：Image Swap on MouseOut (JavaScript, not JQ)MouseOut 上的图像交换（JavaScript，不是 JQ）
【发布时间】：2019-10-13 00:52:19
【问题描述】：

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

图片的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 属性，请告诉我，以便将其还原。同样，我不能引用特定的图像名称，因为那样会容易得多（：谢谢！

【问题讨论】：

请改进缩进！

标签： javascript

【解决方案1】：

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

请尝试以下示例。

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

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

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

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

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

【讨论】：