title: Improve the triggering of animated gifs
body: <p>UPDATE: Now solved my problem by using an alternative method (see accepted answer for details). </p>
  
  <p>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)...</p>
  
  <p>You can see what I'm trying for a limited time here: </p>
  
  <p>Here's an example of the code I'm using:</p>
  
  <pre><code>&lt;div id="foo"&gt;
  &lt;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()"&gt;
  &lt;img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"&gt; &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>