Question

I am trying to replace an image with another image on rollover and use a fade.

I have 2 images water_bag.jpg and water_bag-hover.jpg

I am trying to replace one on rollover with the following javascript:

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

$('.my_img').parent().append($('.my_img').clone().attr('src','-hover.jpg').fadeIn('slow'))


});
</script>

My html is just this:

<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" class="my_img" /></a>

What am I doing wrong?

Answer 1

Here’s simple way: set one image as a background, and fade in another on top:

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

JS:

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

DEMO: http://jsfiddle.net/Diodeus/gYyBL/