CODEWITHSUNDEEP
javascriptjquery
Sackling
Sackling

Reputation: 1820

why does this jquery image swap not work in chrome and on first load in firefox

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>

Upvotes: 0

Views: 352

Answers (2)

mrtsherman
mrtsherman

Reputation: 39872

Try calling your code in

$(document).load( ... )

instead. Images aren't ready in ready. Load is a callback for anything with a src attribute. So once all those load (including images) it will fire. You can also call it on images. For example

$('img').load( function() ... );

Method chaining for performance.

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

Upvotes: 2

Brian Minnich
Brian Minnich

Reputation: 402

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/

Upvotes: 2

Related Questions