How to change img src on click and release event effect

How to change img src on click and release event effect

Hello there
Can someone help me please. This is quite urgent request.

am creating a menu where on hover i change images src, but i want to add another effect when clicked on the images , the image changes to state "ON". Plus if when i clicked on another image the previously clicked images should release it's state "on" back to "off".

here is my code for hover +clicked

$(
function()
{
// set up rollover
$("ul.SubItems li ").hover(
function()
{
$(this).children().children('a').css('color','#FD8900');
$arrSrc =$(this).children().children('img').attr('src').split('_off');
$(this).children().children('img').attr('src',$arrSrc[0]+'_on'+$arrSrc[1]);

},
function()
{ $(this).children().children('a').css('color','#747474');
$arrSrc=$(this).children().children('img').attr('src').split('_on'); $(this).children().children('img').attr('src',$arrSrc[0]+'_off'+$arrSrc[1]);
}
)
//clicked
.click( function(){

help for this part

});

});


Thank you
Reshmi