Fare gübresinden sonra yeniden yüklemek için gif gücü

Question

Web sitemde, fareyle üzerine gelindiğinde GIF animasyonu boyunca dolaşan ve farenin resmi terk ettiğinde statik görüntüye dönen birkaç resmim var.

Gif, fare açıldığında ilk karesinden oynatılmasını isterim. Ancak, bir resmin üzerine geldiğimde fareyi uzağa hareket ettirin ve tekrar fareyle görüntülendiğinde, görüntü, üzerinde bulunduğu son kareden devam eden gif'e dönecektir.

İşte benim HTML kodu aşağıdadır:

<img id="menugif"> 

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

Ben Javascriptleri dahil herhangi çözümü için minnettar olurdum! Hepinize teşekkür ederim :)

Answer 1

Bu düzeltmek için ucuz bir yoldur, ama ben bunu çözmek için:

Her HTML gif kendi kimliği vardır:

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

Her bunlardan birinin kendi stili vardır, örneğin:

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

Sonra her element kendi JavaScript vardır:

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, ek olarak birkaç kütüphaneye (jQuery ve Font Awesome) ihtiyacınız olsa bile hem CSS hem de Javascript tarafını tamamen kapatacağını düşünüyorum.

Answer 3

bu deneyin:

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