Animovať gif na hover (tumblr html) - html, animovaný-gif

Snažil som sa veľa rôznych kódov, ale nemôžem sa zdalo, že niektoré z nich fungujú, alebo som si istý, kde umiestniť kód. (Robím to prostredníctvom html na tumblr tému)

Snažím sa oživiť záhlavie gif na vznášačke. Mám statický gif http://i.imgur.com/K3sHfIF.gif & animovaný http://i.imgur.com/fbiY7A0.gif.

Mohol by mi niekto ukázať, ako to urobiť, aby sa zmestil do tumblr.

odpovede:

Nemôžete animovať súbor gif na vznášacej lište; alebo začať animáciu vznášať atď.

Čo môžete urobiť tu je pridať obrázok na hlavnú stránku a zmeniť ho, keď je udalosť vznášať.

Tu by bol príklad

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

Potom kód jQuery vykoná akciu a zvládne udalosť vznášania myši ako

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

Teraz, keď sa vznášate nad elementom, získal by zdrojový atribút jeho zmeny na udalosti vznášať sa. Nezabudnite vždy zahrnúť zdrojový súbor jquery do vášho projektu.

Skúste vytvoriť div (so statickým gifom vnútri)kde chcete, aby boli obrázky na webe. Potom použite volanie "onmouseover" na nastavenie innerHTML div na animovaný gif a volanie onblur na jeho nastavenie späť na statický.

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

Dúfam, že to pomôže!