Question

I have a jQuery script for a slideshow play/pause button that toggles between two images on click. Is there a way to add a rollover state to the separate images that are being toggled between?

Here’s the script:

$(".play").toggle(
function () {
$(this).find("img").attr({src:"images/btn-play.png"});
},
function () {
$(this).find("img").attr({src:"images/btn-pause.png"}); 
}
);

Here’s the site: http://www.beta.erickdoxey.com (work in progress). The previous and next buttons have the rollover state that I would like to achieve with the pause/play button. Any help would be appreciated.

Answer 1

My suggestion is to add a class to the play button and then detect that class on hover. What I mean is:

$(".play").toggle(function () {
    $(this).find("img").attr({src:"images/btn-play.png"}).addClass('paused');
}, function () {
    $(this).find("img").attr({src:"images/btn-pause.png"}).removeClass('paused'); 
});

Then you can detect it on hover like so:

 if (this).hasClass('paused') {
    $(this).find("img").attr({src:"images/btn-play-hover.png"})
 } else {
    $(this).find("img").attr({src:"images/btn-pause-hover.png"})
 }

You can further use that class for other things later too.