You need to use the onClick event handler of the images to call a function which performs the following actions:
1. Reset all images to the original state (setting img.src).
2. Set the clicked image to active (I would recommend passing the clicked image as a parameter to the onClick function).
3. Change the location of the document in the other frame.
It would probably look something like this:
<img name="img1" src="img1_inactive.gif"
onmouseover="this.src='img1_active.gif'"
onmouseout="this.src='img1_inactive.gif'"
onclick="movepage('target.htm',this,'img1_active.gif')">
<script language="javascript">
function movepage(targetpage, imgtochange, activesrc){
// you could probably do this using a for loop
img1.src = 'img1_inactive.gif';
img2.src = 'img2_inactive.gif';
// etc
imgtochange.src = activesrc;
parent.mainframe.document.location = targetpage;
}
</script>
I haven't tested this, but you get the idea. One problem will be that if you mouse over the active (current page) image than mouse out again it will reset, but you should be able to work around this.
Good luck
Adam