Improve the triggering of animated gifs

Question

UPDATE: Now solved my problem by using an alternative method (see accepted answer for details).

Standard wordpress install, I have 4 navigation "buttons" along the bottom of the page. Each button consists of 2 animated gifs triggered by mouse-enter and mouse-out events. The idea is to have a puppet animal bounce up on hover, and then pop back down again when you move the mouse away (it's for a kids' nursery school)...

You can see what I'm trying for a limited time here:

Here's an example of the code I'm using:

<div id="foo">
<a href="mysite.com"

onMouseOver="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerup.gif'"

onMouseOut="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif'"

onFocus="if(this.blur)this.blur()">
<img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"> </a>

While it does work, it is not as reliable as I want. Sometimes the mouseover event fails to trigger the first gif animation, so any ideas to improve the effect would be much appreciated - thanks.

What is exactly your question? Maybe you should specify your problem a little bit more. — gitaarik, Jun 11 '13 at 13:03
I'd like some comments or ideas to help me improve the reliability of triggering the animated gif rollovers. It seems to work well on first load, but after hovering over them a couple of times they often fail to "fire"..? — user22537, Jun 11 '13 at 13:09
Please, add your solution as an Answer and acept it as the correct one. — brasofilo, Jul 04 '13 at 10:41

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Credit to Mark Kramer for the solution - Stop a gif animation onload, on mouseover start the activation.

<script type="text/javascript">
$(document).ready(function()
{
    $("#imgAnimate1").hover(
        function()
        {
            $(this).attr("src", "/images/tigerup.gif");
        },
        function()
        {
            $(this).attr("src", "/images/tigerdown.gif");
        });
});
</script>

And then adding the images like this:

<img id="imgAnimate1" src="/images/tigerdown.gif" alt="" >

Improve the triggering of animated gifs

1 Answers1