---
title: "preload image funktion?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/94185-preload-image-funktion"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "wborg"
published: "2004-01-07T19:46:48.000Z"
updated: "2004-01-07T19:46:48.000Z"
replies: 0
views: 250
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/94185-preload-image-funktion"
---

# preload image funktion?

## #1 — wborg, 2004-01-07T19:46Z

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

Permalänk: https://www.webforum.nu/p/94185

---

Tråden på webben: https://www.webforum.nu/amne/javascript/94185-preload-image-funktion