[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法

質問

まず最初に、このページにはとても感謝しています。しかし、この時点で、私は私が望むものに合う答えを見つけることができない質問があります（多分それは私がそれを行う方法を達成することはできません）。

静止画のリンクがあって、ユーザーがそのリンクの上にカーソルを移動すると、アニメーションGIFを再生したいのです（アニメーションGIFはループしないように設定されているので、一度だけ再生されます）。そして、ユーザーが移動すると静止画像に戻り、再び移動すると、GIFが最初から再生されるようにします。

私はhtml5とCSSを組み合わせてWebを作成しています（同時に勉強のために使っています）。過去にC++などでプログラミングをしたことがありますが、Webの文脈では初めてです。

今のところ試したのはこんな感じです。

CSSを使用します。

.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}

.img-acu:hover
{
background-image: url("acusel.gif");
}

HTMLです。

<a href="../example.html" class="img-acu" title="ACU Project link"></a>

しかし、全く何も表示されない :( 不思議なのは、この同じ例を2つの静止画像（pngフォーマット）で使用したときはうまくいったのに、なぜかアニメーションGIFではうまくいかないことです。

試したのはこれです。

CSSです。

#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}

#test:hover
{
background-image: url("acusel.gif");
}

HTMLです。

<div id="test"></div>

ただ、リンクがうまくいかず、アニメーションGIFが最後のフレームに達すると、（ページを再読み込みしない限り）リセットされないのです。

HTML5 + CSSでこれを適切に実現する方法があるかどうかご存知ですか？

どんなことでもご相談ください。

ありがとうございました!

解決方法は？

静止画像とGIF画像を使うことで実現できます(9gagのやり方です!)

基本的なスクリプトはそのようなものです。

<img id="myImg" src="staticImg.png" />

<script>
    $(function() {
        $("#myImg").hover(
            function() {
                $(this).attr("src", "animatedImg.gif");
            },
            function() {
                $(this).attr("src", "staticImg.jpg");
            }                         
        );                  
    });
</script>