gpt4 book ai didi

javascript - 使用 MouseOver 更改图像

转载 作者:行者123 更新时间:2023-11-28 04:46:40 26 4
gpt4 key购买 nike

我是 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com