Hi

I have three images being used to indicate an application icon state and I'm attempting to use css to do this.

No problem with the original or hover states:

#myDIV {
background-image: url(icons/homeBlack.png);
}

#myDIV:hover {
background-image: url(icons/homeWhite.png);
}

but I need to do two other things: 1) when the item is clicked it should use the third image

 $("#myDIV").click(function(event){

// change this button
$(this).css("background-image", "url(icons/homeBlue.png)");

});

2) if it is clicked again it should not apply the third image again because it's already applied - so it needs to check if it has been applied

My questions are: 1) simply am I missing a css trick somewhere or is Jquery the best way to do this? 2) can I check which background-image is in place and how?

I can't seem to find anything in JQuery that would allow me to determine which image is "currently" in place.

Thanks in advance for any help.