マウスを離した後にgifを再ロードするようにします

Question

私のウェブサイトにはマウスオーバーでGIFアニメーションをループするいくつかの画像があり、マウスがその画像から離れると静止画像に戻ります。

マウスが動いたときに最初のフレームから再生するようにしたいと思います。しかし、画像上にマウスを置いてマウスを離してもう一度ホバーすると、画像は最後のフレームから継続してgifに変わります。

は、ここに私のHTMLコードです：

<img id="menugif"> 

マイCSS：

#menugif 
{ 
    padding-top: 15px; 
    height: 115px; 
    width: 125px; 
    content:url(../images/Hulk.png); 
    float: left; 
} 
#menugif:Hover 
{ 
    cursor:pointer; 
    content:url('../images/Hulk.gif'); 
    float: left; 
} 

私はジャバスクリプトを含む任意のソリューションに感謝されると思います！ありがとうございました。

Answer 1

これはそれを修正するための安価な方法ですが、私はこれをしなかった解決するために：

各HTML GIFは独自のIDがあります。

<a id="single_image1" href="#"><img id="menugifHulk" src="images\hulk.png"></a> 

それぞれをこれらのいずれかのスタイルは、次のようになります。

#menugifHulk 
     { 
      padding-top: 15px; 
      height: 115px; 
      width: 125px; 
      float: left; 
     } 

そして、各要素は、独自のJavaScriptを持っている：

var img = document.getElementById('menugifHulk'); 
img.addEventListener('mouseleave', function() { 
    var imageUrl = img.src; 
    img.src = ""; 
    img.setAttribute('src', 'images/Hulk.png'); 
}, false); 
img.addEventListener('mouseover', function() { 
    img.setAttribute('src', 'images/Hulk.gif'); 
}, false); 

Javaは、次のように機能していた：あなたは私のJSFiddleを書くことができますしてください

function GifReset() 
{ 
    var img = document.getElementById('menugifHulk'); 
    img.addEventListener('mouseleave', function() { 
     var imageUrl = img.src; 
     img.src = ""; 
     img.setAttribute('src', 'images/Hulk.png'); 
    }, false); 
    img.addEventListener('mouseover', function() { 
     img.setAttribute('src', 'images/Hulk.gif'); 
    }, false); 
} 

Answer 2

私は、this tutorialは、余分なライブラリ（jQueryとFont Awesome）が2つ必要な場合でも、CSSとJavaScriptの両方を完全にカバーしていると思います。

Answer 3

はこの試してみてください。

var img = document.getElementById('menugif'); 
img.addEventListener('mouseleave', function() { 
    this.style.content = this.style.content; 
}, false);