JQuery identify current CSS background-image in three-state icon/button?
- by T9b
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.
