Animate gif on hover (tumblr html) - html

Question

I have tried many different codes but I cant seem to make any of them work or i'm uncertain where to place the code. (I am doing this through html on a tumblr theme)
I am trying to animate a header gif on hover. I have a static gif http://i.imgur.com/K3sHfIF.gif & an animated one http://i.imgur.com/fbiY7A0.gif.
Could someone please show me how to do this to fit into a tumblr.

Answer 1

You cannot animate a gif file on hover; or start a hover animation etc.
What you can do here is to add an image on the main page and change it when there is a hover event.
Here would be the example
<img src="/link_of/image.png" alt="photo" class="header" />
Then the jQuery code would take the action and handle a mouse hover event as
$('.header').hover(function () {
$(this).attr('src', '/link_of/animation.gif');
});
Now when you'll hover over the element. It would get the source attribute of its changed upon a hover event. Remember to always include the jquery source file in your project.

Answer 2

Try making a div (with the static gif inside) where you want the images to be on the site. Then, use an onmouseover call to set the innerHTML of the div to the animated gif and an onblur call to set it back to the static one.
HTML:
<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();">
<img src="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\">";
}
Hope that helps!