Okay so after a lot of trial and error. I found a code to swap images on mouseover, then back again on mouseout.
I am going to use this for my website menu. The only problem is that the code does not work when I add muliple
images. The original code uses

image01= new Image()
image01.src="test.gif"
image02= new Image()
image02.src="test2.gif"

So I simply added image03 and image04 like this:

image01= new Image()
image01.src="test.gif"
image02= new Image()
image02.src="test2.gif"
image03= new Image()
image03.src="test3.gif"
image04= new Image()
image04.src="test4.gif"

This did not work.

Here is the code I am using in my <body>:

<a href="#" onmouseover="rollover('Home', image02)"
onmouseout="rollover('Home', image01)">
<img src="/images/Home_off.jpg" name="Home" border="0"></a><a href="#" onmouseover="rollover('Aboutus', image04)"
onmouseout="rollover('Aboutus', image03)"></a><img src="/images/aboutus_off.jpg" name="Aboutus" border="0">

This is the code I am using in my <head>:

<script type="text/javascript">
<!--
image01= new Image()
image01.src="/images/Home_off.jpg"
image02= new Image()
image02.src="/images/Home_on.jpg"
image03= new Image()
image03.src="/images/aboutus_off.jpg"
image04= new Image()
image04.src="/images/aboutus_on.jpg"

function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
//-->
</script>

The link to where I found the code: http://www.javascriptkit.com/javatutors/image4.shtml

My website where I will be using the code for the menu. (Bottom menu): http://www.matthewedward.ca

Any help would be greatly appreciated. Thank you.