Question

I’ve got an button that on page load reads "Show Content", and when clicked, the content is shown and it switches to a button with "Hide Content". This works nicely, as per my code below.

$('div.content').hide();
    
$('img.contentslide').click(function() {
    $('div.content').toggle(1500,function() {
        if (jQuery.browser.msie) {                          // Lines 15-17 = special treatment for IE, because of  
            this.style.removeAttribute('filter');           // lack of support for ClearType font rendering on items
        }                                                   // being toggled in jQuery.
    });
        if (slideState == 'closed') {
            $('img.contentslide').attr('src','images/hidecontentstd.png');
            slideState = "open";    

        } else {
            $('img.contentslide').attr('src','images/showcontentstd.png');
            slideState = "closed";
        }
});

with slideState being my boolean variable that is set to closed on DOM ready.

What I AM having problems with is getting a hover in there, so that when the user hovers over the button the RELEVANT hover image appears (i.e. a hide content hover when slideState is open and a show content hover when slideState is closed).

I’ve tried following this: http://www.foryourlungsonly.net/2007/10/jquery-image-swap/

But with no luck. I don’t want to use CSS hovers, please.

Answer 1

You can just do the same thing you do when you select the correct image with .click() but with a .hover() event instead.

$('img.contentslide').hover( function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedHover.png');
        } else {
            $( this ).attr('src','images/openHover.png');
        }
    },
    function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedNoHover.png');
        } else {
            $( this ).attr('src','images/openNoHover.png');
        }
    }
);