我是 javascript 和 Html 的新手，输入了一段代码，当鼠标悬停在上面时会更改图像，它可以工作，但我想知道是否有更好的解决方案，因为它非常长且重复； 这是代码:
<doctype html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<img src="image1.jpg" height="200px" width="300px"
onmouseover="rollover(this)" onmouseout="mouseaway(this)/>
</td>
<td>
<img src="image2.jpg" height="200px" width="300px"
onmouseover="rollover1(this)" onmouseout="mouseaway1(this)"/>
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" height="200px" width="300px"
onmouseover="rollover2(this)" onmouseout="mouseaway2(this)"/>
</td>
<td>
<img src="image4.jpg" height="200px" width="300px"
onmouseover="rollover3(this)" onmouseout="mouseaway3(this)"/>
</td>
</tr>
</table>
<script language="javascript">
function rollover(img1)
{
img1.src = 'image2.jpg';
}
function mouseaway(img1)
{
img1.src = "image1.jpg";
}
function rollover1(img2)
{
img2.src='image3.jpg';
}
function mouseaway1(img2)
{
img2.src='image2.jpg'
}
function rollover2(img3)
{
img3.src='image4.jpg';
}
function mouseaway2(img3)
{
img3.src='image3.jpg'
}
function rollover3(img4)
{
img4.src='image1.jpg';
}
function mouseaway3(img4)
{
img4.src='image4.jpg'
}
</script>
</body>
</html>
最佳答案
简单的答案是:
<img onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" height="200px" width="300px" src="image1.jpg">
关于javascript - 使用 MouseOver 更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43084303/