Question

I am trying to use jquery to replace an image on rollover (with fade) you can see this on the bottom left here:

http://www.anzie.com/index_rollover.php

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..

Here is my php:

<a  href="<?php echo tep_href_link(FILENAME_EVENTS); ?>"><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" /></a>

And here is the javascript:

<script type="text/javascript">
$(document).ready( function() {

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $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)             
        })                    
});


});
</script>

Answer 1

When I right click in chrome and say “Inspect”; your height/width are set to 0px. If I inline edit your height/width via chromes tools the image appears. Try jquery’s outerWidth() and see if that provides better results.

http://api.jquery.com/outerWidth/