Nav-Bar Rollover Effect Issue (Code Needs Checking Over)

[Kempo]

Hey, keeping it short, I have a nav-bar I made, after editing a particular code online (the author said that it was available for use for free, so no issue there). This particular nav-bar includes a roll-over feature, which WAS working until this morning, when I SLIGHTLY edited the code, in order to position the nav-bar exactly where I wanted it (as apposed to being just left aligned, as it was before. The buttons are essentially working perfectly except for the change of image upon rollover, and I was wondering if anybody here would be kind enough to read through the albeit slightly cluttered code, to suggest a solution to have the buttons in exactly the position they're currently in, but with the desired rollover effects included (I am OK with HTML, but have a VERY limited javascript knowledge). The nav-bar in question is on the left hand side at www.joinfty.com if you want to see it in the current state (although be aware that there is an embedded you-tube video which will play upon visiting the url). Otherwise, the current coding is as follows:

Head

Code:

 <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(119,60);
a1.src = "http://i67.servimg.com/u/f67/13/77/20/69/forumd10.png";
a2 = new Image(119,60);
a2.src = "http://i67.servimg.com/u/f67/13/77/20/69/forumm10.png";
b1 = new Image(119,60);
b1.src = "http://i67.servimg.com/u/f67/13/77/20/69/twitte11.png";
b2 = new Image(119,60);
b2.src = "http://i67.servimg.com/u/f67/13/77/20/69/twitte10.png";
c1 = new Image(119,60);
c1.src = "http://i67.servimg.com/u/f67/13/77/20/69/youtub10.png";
c2 = new Image(119,60);
c2.src = "http://i67.servimg.com/u/f67/13/77/20/69/youtub11.png";
d1 = new Image(119,60);
d1.src = "http://i67.servimg.com/u/f67/13/77/20/69/faqdef10.png";
d2 = new Image(119,60);
d2.src = "http://i67.servimg.com/u/f67/13/77/20/69/faqmov10.png";
e1 = new Image(119,60);
e1.src = "http://i67.servimg.com/u/f67/13/77/20/69/contac10.png";
e2 = new Image(119,60);
e2.src = "http://i67.servimg.com/u/f67/13/77/20/69/contac11.png";
}

//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>


BODY

Code:

 <div style="position: absolute; left: 0px; top: 306px;" id="layer300">
<b>
<a href="http://www.joinfty.com/forum" onMouseOver="hiLite('a','a2')" onMouseOut="hiLite('a','a1','')">
<font size="2"><img name="a" src="http://i67.servimg.com/u/f67/13/77/20/69/forumd10.png" alt="Your Primary Stop To Joining In The Community" border=0 width=119 height=60></font></a></b></div><div style="position: absolute; left: 0px; top: 366px;" id="layer400">
<b>
<a href="http://www.twitter.com/TheFortayClan" onMouseOver="hiLite('b','b2')" onMouseOut="hiLite('b','b1','')">
<font size="2"><img name="b" src="http://i67.servimg.com/u/f67/13/77/20/69/twitte11.png" alt="Keep Up To Date With The Clan's Official Twitter Feed" border=0 width=119 height=60></font></a></b></div> <div style="position: absolute; left: 0px; top: 426px;" id="layer500">
<b>
<a href="http://www.youtube.com/user/KempoProductions" onMouseOver="hiLite('c','c2')" onMouseOut="hiLite('c','c1','')">
<font size="2"><img name="c" src="http://i67.servimg.com/u/f67/13/77/20/69/youtub10.png" alt="Kempo At His Very Finest" border=0 width=119 height=60></font></a></b>
<div style="position: absolute; left: 0px; top: 486px;" id="layer600">
<b>
<a href="http://www.joinfty.com/f43-welcome-to-our-community" onMouseOver="hiLite('d','d2')" onMouseOut="hiLite('d','d1','')">
<font size="2"><img name="d" src="http://i67.servimg.com/u/f67/13/77/20/69/faqdef10.png" alt="Want More Information On What We Stand For? (Continuously Under Construction)" border=0 width=119 height=60></font></a></b></div>
<div style="position: absolute; left: 0px; top: 546px;" id="layer700">
<b>
<a href="http://www.joinfty.com/u1contact" onMouseOver="hiLite('e','e2')" onMouseOut="hiLite('e','e1','')">
<font size="2"><img name="e" src="http://i67.servimg.com/u/f67/13/77/20/69/contac10.png" alt="Get In Contact With Your Webmaster" border=0 width=119 height=60></font></a><font size="2"></body>

</font></b>


Thanks,
Kempo.