Question

I currently have code to roll over an image link as below:

<a id="show" href="#"><img src="images/show-me.png" border=0 onmouseover="this.src='images/show-me_over.png';" onmouseout="this.src='images/show-me.png'"></a>

on clicking this it shows a div

jQuery(document).ready(function(){
    jQuery("#show").toggle(
        function(){
            jQuery('#home-hidden-extra').animate({'height': '480px'} ,1000);},
        function(){
            jQuery('#home-hidden-extra').animate({'height': '0px'} ,1000);}
    );
});

What i would like to do but i cant find/figure out is to use show_me.png and show_me-over.png when the div is hidden and then hide_me.png and hide_me-over.png when the div is shown.

How is the simplest way to achive this?

Thanks again!

Answer 1

You should be putting static hover styles to CSS. Define

.linkShow {
    background-image: url("images/show_me.png");
}

.linkShow:hover {
    background-image: url("images/show_me_hover.png"); 
}

.linkHide {
    background-image: url("images/hide_me.png");
}

.linkHide:hover {
    background-image: url("images/hide_me_hover.png"); 
}

Then add these classes to the link with jquery.

$("#show").removeClass().addClass("linkShow");