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

Question

我正在努力让这个广告发挥作用，我已将其设置为在 MouseOver 上变成 gif，效果很好，但我希望它在 MouseOut 上返回静态图像。这是我的代码

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%;
}

广告class没有任何样式

脚本

<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>

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

Getting an image to turn into a gif on hover, and revert to static after

html

javascript

css

gif