我还在学习Javascript，我一直遇到这个问题，但我不确定为什么。当用户将鼠标移到图像上时，我试图使图像变小，然后当他们将鼠标移出图像时变大或变回原始图像。图像变小了，但由于某种原因我似乎无法让它恢复到原来的大小。
这是网页： https://cis337-0014.cisdprogram.com/mod10/mod10.html
我只尝试了几个解决方案，但我真的不知道从这里去哪里。我还有其他正确更改的图像，但我没有在下面的示例中显示以求简洁（但我在最后添加了一个），所以我不明白为什么这是唯一一个不起作用的图像：
尝试 1
<!DOCTYPE html>
<html lang='en'>
<head>
<script>
function displaySImage(imageFile){
var smallerImage = document.getElementById("mainImage");
var newNode = document.createElement("img");
newNode.id = "mainImage";
newNode.src = imageFile;
newNode.alt = "Small Image";
newNode.className = "mainImage";
newNode.style.width = "300px";
newNode.style.height = "200px";
smallerImage.parentNode.replaceChild(newNode, smallerImage);
}
function displayLImage(imageFile){
var largerImage = document.getElementById("mainImageL");
var newNode = document.createElement("img");
newNode.id = "mainImageL";
newNode.src = imageFile;
newNode.alt = "Large Image";
newNode.className = "mainImageL";
newNode.style.width = "500px";
newNode.style.height = "400px";
largerImage.parentNode.replaceChild(newNode, largerImage);
}
<link rel='stylesheet' type='text/css' href='body1.css' />
</head>
<body>
<div>
Hover over the lightbulb to make it smaller!
<a href=#
onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
onmouseout="displayLImage(light.src='lightOn.jpg')" id="mainImageL"
>
<img border = 0 name = "light" src = "lightOn.jpg" width="500px">
</a>
</div>
</body>
<html>
尝试2
<!DOCTYPE html>
<html lang='en'>
<head>
<script>
function displaySImage(imageFile){
var smallerImage = document.getElementById("mainImage");
var newNode = document.createElement("img");
newNode.id = "mainImage";
newNode.src = imageFile;
newNode.alt = "Small Image";
newNode.className = "mainImage";
newNode.style.width = "300px";
newNode.style.height = "200px";
smallerImage.parentNode.replaceChild(newNode, smallerImage);
}
<link rel='stylesheet' type='text/css' href='body1.css' />
</head>
<body>
<div>
Hover over the lightbulb to make it smaller!
<a href=#
onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
onmouseout="light.src='lightOn.jpg';"
>
<img border = 0 name = "light" src = "lightOn.jpg" width="500px">
</a>
</div>
</body>
<html>
尝试 3（此时盲目尝试任何事情）
<!DOCTYPE html>
<html lang='en'>
<head>
<script>
function displaySImage(imageFile){
var smallerImage = document.getElementById("mainImage");
var newNode = document.createElement("img");
newNode.id = "mainImage";
newNode.src = imageFile;
newNode.alt = "Small Image";
newNode.className = "mainImage";
newNode.style.width = "300px";
newNode.style.height = "200px";
smallerImage.parentNode.replaceChild(newNode, smallerImage);
}
<link rel='stylesheet' type='text/css' href='body1.css' />
</head>
<body>
<div onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
onmouseout="light.src='lightOn.jpg';">
Hover over the lightbulb to make it smaller!
<span>
<img border = 0 name = "light" src = "lightOn.jpg" width="500px">
</span>
</div>
</body>
<html>
在同一个文件中工作的一个： ...
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' type='text/css' href='body1.css' />
</head>
<body>
<div>
Hover over the picture to see the wood change!
<a href=#
onmouseover="wood.src='woodHeart.jpg';"
onmouseout= "wood.src='wood.jpg';"
>
<img border = 0 name = "wood" src = "wood.jpg" width="500px">
</a>
</div>
</body>
<html>
您的 Attempt 1 几乎是正确的，但是由于您正在创建 newElement 这个
onmouseoveronmouseout如果您不需要创建 newElement，您可以在尝试中包含它。
function smallImg(img) {
img.style.width = "300px";
img.style.height = "200px";
}
function bigImg(img) {
img.style.width = "500px";
img.style.height = "400px";
}<div>
Hover over the lightbulb to make it smaller!
<br>
<a href=#>
<img
onmouseover="smallImg(this)"
onmouseout="bigImg(this)"
id="mainImage"
name="light"
width="500px"
src="https://cis337-0014.cisdprogram.com/mod10/lightOn.jpg">
</a>
</div>