Solution :)

This is what your html should look like:

<html>
<head>
<title>Your Document Title Goes Here</title>
<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(107,36);
a1.src = "a1.jpg";
a2 = new Image(107,36);
a2.src = "a2.jpg";
b1 = new Image(107,36);
b1.src = "b1.jpg";
b2 = new Image(107,36);
b2.src = "b2.jpg";
}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>
</head>
<body background="some_image.jpg" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
 <a href="menuz.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')"><img name="a" src="a1.jpg" border=0 width=107 height=36></a>
<a href="menuz.html" onMouseOver="hiLite('b','b2','Your Comment Here')" onMouseOut="hiLite('b','b1','')"><img name="b" src="b1.jpg" border=0 width=107 height=36></a>
</body>
</html>

Now the real test is to try it yourself!!
Back To onMouseOver Tutorial