Animuj gif na hover (tumblr html) - html, animated-gif

Próbowałem wielu różnych kodów, ale nie wydaje mi się, aby jeden z nich działał lub nie jestem pewien, gdzie umieścić kod. (Robię to poprzez html na temat tumblr)

Próbuję animować gif nagłówka po najechaniu myszą. Mam statyczny gif http://i.imgur.com/K3sHfIF.gif i animowany http://i.imgur.com/fbiY7A0.gif.

Czy ktoś mógłby mi pokazać, jak to zrobić, aby zmieścił się w tumblr.

Odpowiedzi:

Nie można animować pliku gif po najechaniu myszą; lub uruchom animację z podpowiedziami itp.

Możesz tutaj dodać obraz na stronie głównej i zmienić go, gdy pojawi się zdarzenie najeżdżania.

Oto przykład

<img src="/images//link_of/image.png" alt="photo" class="header" />

Następnie kod jQuery wykona akcję i obsłuży zdarzenie najechania myszką jako

$(".header").hover(function () {
$(this).attr("src", "/link_of/animation.gif");
});

Teraz, gdy najedziesz kursorem na element, otrzymasz atrybut źródła jego zmiany po zdarzeniu na zawiasie Pamiętaj, aby zawsze dołączać plik źródłowy jquery do projektu.

Spróbuj zrobić div (z statycznym gifem wewnątrz)gdzie chcesz, aby obrazy były na stronie. Następnie użyj wywołania onmouseover, aby ustawić innerHTML div na animowany gif i wywołanie onblur, aby ustawić go z powrotem na statyczny.

HTML:

<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();">
<img src="/images/source of static gif">
</div>

JavaScript:

function showAnimated(){
document.getElementById("div_name").innerHTML = "<img src="source of animated gif">";
}
function showStatic(){
document.getElementById("div_name").innerHTML = "<img src="source of static gif">";
}

Mam nadzieję, że pomaga!