Help with attr, mouseenter, and mouseout not functioning correctly

Question

I can't get the attr function to change the class and keep it until the next click. It also won't use the new mouseenter and mouseout functions. Any ideas what I am doing wrong?

HTML

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" class="play" src="images/play1.png" ></div></a>

JQUERY

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });

    return false;
});

$('.play').mouseenter(function(){
    $(this).attr('src','images/play2.png');
}).mouseout(function(){
    $(this).attr('src','images/play1.png');
});

$('.paused').mouseenter(function(){
    $(this).attr('src','images/pause2.png');
}).mouseout(function(){
    $(this).attr('src','images/pause1.png');
});

Here is a link to a sample of the page. MMA Slideshow controls sample

Answer 1

When you say:

It also won't use the new mouseenter and mouseout functions

I am guessing that it is because when your code runs, your objects don't have the class yet so they aren't bound to the eventhandlers. You could use the live function to bind your event correctly.

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });
  return false;
});

$('.play').live("mouseenter", function() {
  $(this).attr('src','images/play2.png');
});

$('.play').live("mouseout", function(){
  $(this).attr('src','images/play1.png');
});

$('.paused').live("mousenter", function() {
  $(this).attr('src','images/pause2.png');
});


$('.paused').live("mouseout", function(){
  $(this).attr('src','images/pause1.png');
});