Three State Image Rollover?

JavaScript
1

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.

2

So I’ve found a CSS solution for this, thanks to some very kind users on here! But does anyone know how, regardless of the pitfalls, how I can create an active state for the above code with JavaScript? Thank you!