Анимиране на gif върху hover (humboldt) - html, animated-gif

Аз се опитах много различни кодове, но не мога да направя някой от тях работят или аз съм "несигурни къде да поставите кода. (Аз правя това чрез HTML на Tumblr тема)

Опитвам се да анимирам заглавния GIF на мишката. Имам статичен GIF http://i.imgur.com/K3sHfIF.gif и анимиран http://i.imgur.com/fbiY7A0.gif.

Може ли някой да ми покаже как да направя това, за да се вмести в tumblr.

Отговори:

Не можете да анимирате gif файл в hover; или започнете анимация с мишката.

Това, което можете да направите тук, е да добавите изображение на главната страница и да го промените, когато има събитие за навъртане.

Тук ще бъде примерът

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

Тогава jQuery кодът ще предприеме действието и ще се справи с събитие за мишка, като

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

Сега, когато "задръжте курсора над елемента. Той ще получи атрибута на източника на неговите промени при събитие при навъртане. Не забравяйте винаги да включвате файла с изходния код на jquery във вашия проект."

Опитайте да създадете div (със статичния gif вътре)където искате изображенията да бъдат на сайта. След това използвайте onmouseover повикване, за да настроите innerHTML на div към анимирания GIF и onblur повикване, за да го върнете към статичното.

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

Надявам се, че помага!