Получение изображения, чтобы превратить в 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%;
}

У класса Advertisment нет стилей

Сценарий

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

Затем измените gif со статическим изображением в функции function showStatic():

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

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