Errors with an image replacement

I have tried every possible combination of methods for replacing an image but have found no solution that works.

I uploaded the problematic code here: http://dl.dropbox.com/u/2959730/index.html

I would suggest downloading the source and trying your code. The problem lies with the player.playPause() function that should be attached to the #playButt img.

Please help I've been struggling for hours now!

EDIT:

I've corrected everything and as per suggestion I'm using this code now for playPause(), but it still doesn't work!. This is the most frustrating thing I have ev开发者_运维百科er dealt with...

this.playPause = function(){  
    this.status = !this.status;  
    var status = this.status;
    var playEl = document.getElementById('play');
    $("#play").fadeOut(200, function(){  
        if(status)  
            playEl.src = "img/pauseButton.png";
        else  
            playEl.src = "img/playButton.png";
        $("#play").fadeIn(200); 
    }) 
} 

playPause() is defined as a property of var player, in playlist.js.

onclick="player.playPause(); return false;"

Update:

The problem is with this callback:

$("#play").fadeOut(200, function(){  
    if(this.status)  
        playEl.src = "img/pauseButton.png";
    else  
        playEl.src = "img/playButton.png";
}).fadeIn(200);  

this.status is undefined inside that callback since this now refers to the element #play. To fix this problem you need to declare var status = this.status before the callback, and test if(status) inside the callback.

Two other things:

1. The .fadeIn(200) should be placed inside the callback, otherwise it is running before the fadeOut completes (so there's no fade effect at all).
2. You don't need var playEl = document.getElementById('play'); since you're using jQuery to grab the element. Inside the callback, the this keyword refers to the element already.

The complete code should be:

var status = this.status = !this.status;
$("#play").fadeOut(200, function(){  
    if(status)  
        this.src = "img/pauseButton.png";
    else  
        this.src = "img/playButton.png";
    $(this).fadeIn(200);
});

Another Update:

In addition to the above fix, there's a further problem. It looks like there are two elements on the page with id="play". In fact, the whole #ipod2 is duplicated. I checked the source code, but it's not there, only in the live DOM. If you $("#play").remove(); in the console, you'll see that the image replacement code now works. However, you'll need to find out where ipod2 is being cloned in the JS and fix that.

You aren't actually attaching to the #playButt image though, from what I can tell. All you're doing is defining the onclick attribute of that image and just calling playPause, which isn't defined.

Have you changed the document since you asked your question?

Does it work if you have onclick="player.playPause(); return false;" in your onclick handler for the #playButt image?

You definitely need to have player.playPause() instead of just playPause().

And you seem to have a problem in the css or height function of slider.js as Firebug reports that a[0] is undefined.