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

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

图像的HTML代码如下所示：

图像的HTML如下所示，共有3个图像：

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

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

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

这是我到目前为止所使用的JavaScript。它可以将图像交换到新图像，但不能将其交换回：(

//函数
var$=函数（id）{
返回文档.getElementById（id）；
}           
//ONLOAD事件处理程序
window.onload=函数（）{
//获取所有IMG标签
var ulTree=$（“图像滚动”）；
var imgElements=ulTree.getElementsByTagName（“img”）；
//处理每个图像
//1.获取IMG标签
对于（变量i=0；i

---

请告诉我您是否可以帮助我找出如何调用图像的src属性，以便将其还原回来。同样，我无法引用特定的图像名称，因为这将更容易（：谢谢！

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

请尝试以下示例

var swapToNewImage=函数（img）{
var secondImage=img.dataset.swapSrc
img.src=secondImage；
}
var swapImageBack=函数（img）{
var previousImage=img.dataset.src
img.src=先前的图像；
}

---

请改进缩进！

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