OnClick - Controlling Original Button Mouseout

I am trying to build a Menu that will have a mouseover effect and when clicked will hold the mouseover image on mouseout. The problem I'm having is that when another menu item is clicked it will not reset the original button's mouseout and if the mouse ever touches it again it will, again, hold the mouseout image. I am aware that It would be easier to just use different pages, but I am wanting to eventually have hidden containers with further menu options drop down from the menu (just trying to explain why it needs to hold the image within the same page).

Here is the function that I have built so far(it doesn't work and I know there are some obvious problems with it, I'm mainly just trying to convey the logic I have used thus far). I am a new javascripter, and my experience is mainly with C#. I am trying to use document.(objectname).src as if it were a variable because It should have a value to return. I'm trying to store the mouseover image in var i, reset all the buttons and then put i(should be the mouseover image)back in the (objectname).src. This probably isn't allowed in javascript, but I left it so you can see how my mind is trying to accomplish this task.

Here you go:
function ClearMenu(xx){
var i
i = xx.src
document.news.src='news.jpg'
document.events.src='events.jpg'
document.press.src='press.jpg'
document.aboutus.src='about.jpg'
document.contact.src='contact.jpg'
document.join.src='join.jpg'
document.news.onmouseout="document.news.src='news.jpg'"
document.events.onmouseout="document.events.src='events.jpg'"
document.press.onmouseout="document.press.src='press.jpg'"
document.aboutus.onmouseout="document.aboutus.src='about.jpg'"
document.contact.onmouseout="document.contact.src='contact.jpg'"
document.join.onmouseout="document.join.src='join.jpg'"
xx.src = i
xx.onmouseout = i
}

My attempt to Call this function would look like this:
<img src="news.jpg" name="news" id="news" onmouseover="newshov.jpg" onmouseout="news.jpg" onclick="ClearMenu(news)"