JavaScript-mouseover&；鼠标图像

我正在尝试制作一个简单的程序，允许我将鼠标移到一个图像上以查看另一个图像。我真的很纠结于如何处理mouseover上的第一个函数。我知道imageNode未声明，但我不知道在哪里声明它以及它将存储什么引用

如果有人能给我指出正确的方向，在mouseover上用HTML中的另一个图像替换image1，然后在mouseout上返回image1，我将不胜感激。我现在真的迷路了

我已经包括了下面的HTML和JavaScript

非常感谢

“严格使用”；
var$=函数（id）{
返回文档.getElementById（id）；
};
window.onload=函数（）{
var image1=$（“image1”）；
var image2=$（“image2”）；
//预加载图像
var links=$（“图像列表”）.getElementsByTagName（“a”）；
var i，
链接
形象；
对于（i=0；i

图像翻转
钓鱼图像
将鼠标移到图像上以进行更改，然后退出
图像以恢复原始图像

如果您有一些html，如

， 您可以仅使用css切换悬停时的图像，如下所示：

#image-rollover {
  background-color: #000;
  background-image: url('SOME_IMG_URL');
  background-size: cover;
  height: 100px;
  width: 100px;
}

#image-rollover:hover {
  background-image: url('SOME_OTHER_IMG_URL');
}

---

在

中的示例中，您可以通过一个简单的方法在Javascript中执行此操作：

var imgOnMouseOver = "OVER_IMG_URI";
var imgOnMouseOut = "OUT_IMG_URI";

var container = document.getElementById("IMG_TAG_ID");
container.addEventListener("mouseover", function(){
    container.setAttribute("src", imgOnMouseOver);
});
container.addEventListener("mouseout", function(){
    container.setAttribute("src", imgOnMouseOut);
});

示例程序运行良好：

---

}

这在没有javascript的情况下是可能的-你对非javascript方法感兴趣吗？纯CSS在这一代人中可以做到。这对你有用吗？@DacreDenny CSS做同样的事情，但我现在正在一本书中的一个练习中工作，它说：将代码添加到页面上显示的两个图像元素的mouseover和mouseout事件处理程序中。当鼠标悬停在id为“image1”的图像元素上时，应显示release.jpg图像，否则应显示hero.jpg图像。id为“image2”的图像元素应该在鼠标放在上面时显示deer.jpg图像和bison.jpg图像，否则“这完全行得通！我正在试图找出一本书中的一个练习，其中说：“为页面上显示的两个图像元素的mouseover和mouseout事件处理程序添加代码“image1”应在鼠标位于其上方时显示release.jpg图像，否则显示hero.jpg图像。id为“image2”的图像元素应在鼠标位于其上方时显示deer.jpg图像，否则显示bison.jpg图像“Hi@Praveen，感谢您的响应。使用：container.addEventListener（”mouseover“，function（）和image1.onmouseover=函数（evt）请详细说明

image1.onmouseover = function() {
    image1.src="images/hero.jpg"
};
image1.onmouseout = function() {
    image1.src="images/release.jpg"
};

image2.onmouseover = function() {
    image2.src="images/deer.jpg"
};
image2.onmouseout = function() {
    image2.src="images/bison.jpg"
};