JQuery identify current CSS background-image in three-state icon/button? -

i have 3 images being used indicate application icon state , i'm attempting use css this.

no problem original or hover states:

#mydiv { background-image: url(icons/homeblack.png); }  #mydiv:hover { background-image: url(icons/homewhite.png); } 

but need 2 other things: 1) when item clicked should use third image

 $("#mydiv").click(function(event){  // change button $(this).css("background-image", "url(icons/homeblue.png)");  }); 

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

my questions are: 1) missing css trick somewhere or jquery best way this? 2) can check background-image in place , how?

i can't seem find in jquery allow me determine image "currently" in place.

thanks in advance help.

create 3 css classes:

.state_1 {background-image: url(icons/homeblack.png)} .state_2 {background-image: url(icons/homewhite.png)} .state_3 {background-image: url(icons/homeblue.png)} 

then when want check state of div use e.g.:

     if ($('#mydiv').hasclass('state_3')) {......} else if ($('#mydiv').hasclass('state_2')) {......} else                                      {......} 

to change image, change class, e.g.

$('#mydiv').removeclass('state_1 state_3').addclass('state_2'); 

you'll have handle hover events in jquery, not css, unless of course use css modifiers ":hover", ":visited"