preload image funktion?

Hej!

Jag vill lägga till en funktion i mitt javascript som gör att bilderna
i min meny "förladdas". Jag har nu ett script som ser till att
bilderna ändras när man rör musen över menyn.

Ändra bild scriptet

function init() {
  if (!document.getElementById) return
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('flip')) {
        imgTemp[i] = new Image();
        imgTemp[i].src = imgarr[i].getAttribute('flip');
        imgarr[i].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
            this.setAttribute('src',this.getAttribute('flip'))
        }
        imgarr[i].onmouseout = function() {
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;

Detta ligger i menu.js.

Nu skulle jag vilja bygga ihop det med följande kod
(min gammla kod):

<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) {
meny_start = new Image(115,60);
meny_start.src = "img/meny_start.gif";
meny_start_on = new Image(115,60);
meny_start_on.src = "img/meny_start_on.gif";

meny_om = new Image(145,60);
meny_om.src = "img/meny_om.gif";
meny_om_on = new Image(145,60);
meny_om_on.src = "img/meny_om_on.gif";

meny_medlem = new Image(100,60);
meny_medlem.src = "img/meny_medlem.gif";
meny_medlem_on = new Image(100,60);
meny_medlem_on.src = "img/meny_medlem_on.gif";

meny_tavling = new Image(110,60);
meny_tavling.src = "img/meny_tavling.gif";
meny_tavling_on = new Image(110,60);
meny_tavling_on.src = "img/meny_tavling_on.gif";

meny_lankar = new Image(89,60);
meny_lankar.src = "img/meny_lankar.gif";
meny_lankar_on = new Image(89,60);
meny_lankar_on.src = "img/meny_lankar_on.gif";

meny_forum = new Image(85,60);
meny_forum.src = "img/meny_forum.gif";
meny_forum_on = new Image(85,60);
meny_forum_on.src = "img/meny_forum_on.gif";

meny_kontakt = new Image(142,60);
meny_kontakt.src = "img/meny_kontakt.gif";
meny_kontakt_on = new Image(142,60);
meny_kontakt_on.src = "img/meny_kontakt_on.gif";
}

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

Det jag vill slippa med den senare koden är att behöva skriva
följande i varje länk:

<a href="default.asp" onMouseOver="hiLite('a','meny_start_on','Your Comment Here')" onMouseOut="hiLite('a','meny_start','')"><img name="a" src="img/meny_start.gif" border=0 width=115 height=60></a>

För med den första koden så behöver jag ju bara skriva så här:

<a href="default.asp"><img name="a" src="img/meny_start.gif" flip="img/meny_start_on.gif" border=0 width=115 height=60></a>

Hoppas någon förstår mig och kan hjälpa till för jag är så
otroligt oförstående när det gäller javascript.

/S