why does this jquery image swap not work in chrome and on first load in firefox
<p>I am trying to use jquery to replace an image on rollover (with fade) you can see this on the bottom left here:</p>

<p><a href="http://www.anzie.com/index_rollover.php" rel="nofollow">http://www.anzie.com/index_rollover.php</a></p>

<p>However in chrome it just fades to near opaque. and in firefox on the first load I get a small blue box on the top left corner (as if it is out of position). but then on refresh it works in firefox. This is working perfectly on my own machine, it only does not work when I try it online. Which leads me to thing it is not loading the images in time perhaps? I am not sure what to do..</p>

<p>Here is my php: </p>

<pre><code>&lt;a  href="&lt;?php echo tep_href_link(FILENAME_EVENTS); ?&gt;"&gt;&lt;img src="images/home_buttons/water_bag.jpg" alt="watch la vie en couleur"   border="0" align="left" hoverImg="images/home_buttons/water_bag-hover.jpg" /&gt;&lt;/a&gt;
</code></pre>

<p>And here is the javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready( function() {

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('&lt;div&gt;')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.height())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});


});
&lt;/script&gt;
</code></pre>
