让图像在悬停时变成 gif，之后恢复为静态

Question

我正在尝试让这个广告工作，我已经设置了它，以便它会变成一个 gif onMouseOver，这工作正常，但我希望它回到静态图像 onMouseOut。这是我的代码

HMTL

<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="">
</a>
</div>

.CSS

.RightAdvert {
float: left;
width: 8%;
}

广告类没有任何样式

脚本

<script>
function playAnimation() {
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
</script>

Answer 1

在onmouseout事件上添加一个方法，onmouseout="showStatic()

<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="showStatic()">
</a>
</div>

然后在function showStatic()函数中更改带有静态图像的gif：

<script>
function playAnimation()
{
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
function showStatic()
{
document.getElementById('animation').src = "squeezy-cheesy.png";
}
</script>