Three State Rollover with jQuery

Three State Rollover with jQuery

I've been researching a good effective way to do 3 state image rollovers with jQuery, but haven't found anything that's workable with an AJAX style page. The page consists of a ul based menu that shows and hides new content depending on the selection. 

What I'm attempting to achieve is once the image has been clicked on, for the "over" state to remain until a new choice is made from that menu, aka another image has been clicked on. Once another image was clicked on, it would then display the active state and the previous would not.

Here is the HTML:

<ul id="navWork">
<li onclick="javascript:doShowHide('spotsPromos');">
<a href="javascript://">
<img src="images/nav-spots-promos.png" alt="Spots and Promos" />
</a>
</li>
<li onclick="javascript:doShowHide('corporate');">
<a href="javascript://">
<img src="images/nav-corporate.png" alt="Corporate" />
</a>
</li>
</ul>

Here is the JavaScript that is activating the rollovers:

$(document).ready(function() { 
  
// preload all rollovers
$("#navWork img").each(function() {
// Set the original src
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.png$/ig,"-over.png");
$("<img>").attr("src", rollON);
});
// navigation rollovers
$("#navWork a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/-over/);
// fon't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/.png$/ig,"-over.png"); // strip off extension
$(this).children("img").attr("src", imgsrcON);
}
});
$("#navWork a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});
});



Any help would be super appreciated, thank you for your time in advance. This forum is a great resource, I look forward to being an active member of the community.