Preload af billeder ved mouseOver

Du kan finde en tutorial i preload af billeder på
http://www.htmlgoodies.com/tutors/preload.html

<html>

<head>
<title>Pre-cached Image MouseOver with Status Bar Alert.</title>
<script language="JavaScript">

//Pre-cache all "off" images
var offImages = new Array(new Image(),new Image(),new Image());
offImages[0].src = "image1.gif"
offImages[1].src = "image2.gif"
offImages[2].src = "image3.gif";


//Pre-cache all "on" images
var onImages = new Array(new Image(180,178),new Image(180,178),new Image(180,178));
onImages[0].src = "image4.gif"
onImages[1].src = "image5.gif"
onImages[2].src = "image6.gif";


//Pass index number and Swap anchor image with image defined in offImages array above
function imageOff(i){
    document.images[i].src = offImages[i].src;
}

//Pass index number and Swap anchor image with image defined in onImages array above
function imageOn(i){
    document.images[i].src = onImages[i].src;
}

//Send message to status bar
function setMsg(msg){
    window.status = msg;
    return true;
}

</script>
</head>

<body>



<a href="http://www.viewsource.dk" onMouseOver="imageOn(0); return setMsg('Click here to check out JavaScripts.com!')" onMouseOut="imageOff(0); return setMsg('')">
<img border="0" src="image1.gif" width="180" height="178"></a>
<br>
<a href="http://www.viewsource.dk" onMouseOver="imageOn(1); return setMsg('Click here to check out Some awesome free java applets!')" onMouseOut="imageOff(1); return setMsg('')">
<img border="0" src="image2.gif" width="180" height="178"></a>
<br>
<a href="http://www.viewsource.dk" onMouseOver="imageOn(2); return setMsg('Click here to check out Some awesome free java applets!')" onMouseOut="imageOff(2); return setMsg('')">
<img border="0" src="image3.gif" width="180" height="178"></a>


</body>

</html>

<ole>
Hvis du ellers holder dig til hirtshals' fortrinlige script, kan du fylde dine arrays på denne måde:

//Pre-cache all "off" images
var offImages = new Array();
for (i=0;i<Antallet_af_dine_billeder-1;i++) {
  offImages[i] = new Image();
  offImages[i].src = "image"+(i+1)+".gif";
}

Det er lidt mere 'sexy', hvis du har mange billeder.
/VH

Tja... koderne foroven har jeg ikke lige prøvet, men de virker sikkert helt fint!

Jeg ville bare lige tilføje at Dreamweaver 3 kan lave MouseOver buttons og tilføjer automatisk et preload script.

I case you got it... :-)

/The Portal

Jeg har prøvet at lave koden som er på det link "doeleman" har givet mig.

Jeg er ikke helt sikker på at det virker!
(prøv evt. på http://www.berkowitch.com/)

/Snedled

Dine mouseover billeder preloader fint, men det ville være rart, om du lige gjorde visningen af lag X-browser ;-)

theportal >> Ganske rigtigt! Det kunne vers. 2.0 også - og GoLive kan det. Problemet er bare, at WYSIWYG programmerne skal tage højde for, hvad brugererne af dem kan finde på af mærkelige ting. Derfor skriver de i reglen tre Koraner, en halv Bibel og et udkast til en ny lukkelov - blot for at lave den simpleste funktion.
Det gør det vanskeligt at rette i og tungt at downloade.
Der er masser af spørgsmål om, hvordan man retter i MM-scripts her på Eksperten - og som oftest ender de i en smartere og langt mere overskuelig løsning med et skrædder- og håndsyet JavaScript.

olebole> Nu har jeg for kort tid siden måtte formatere og har ikkefået smidt Netscape ind endnu. Men jeg troede at den var X-browser!

Hvordan skulle jeg ellers det??

/Snedled

??????????...Har du lavet det om - eller er jeg blevet fuldstændig...?!?

I nat syntes jeg ikke at kunne se dem, men det funker da fint nu (jeg er vist endda selv ophavsmand til scriptet...hehe).

Der, hvor du skriver:

var cont=new Array();
cont[0]='what?';

kan du skrive dine billeder:

var cont=new Array();
cont[0]='<IMG SRC=menugfx/bover.gif BORDER=0>';
cont[1]='<IMG SRC=menugfx/e_over.gif BORDER=0>';
cont[2]='<IMG SRC=menugfx/r_over.gif BORDER=0>';
cont[3]='<IMG SRC=menugfx/k_over.gif BORDER=0>';

...og så videre. Så kan du i kaldet skrive sådan i stedet:

onmouseover="showCont(cont[0]);"

================================

Eller du kan skrive:

var cont=new Array();
var cont=new Array();
cont[0]='bover.gif';
cont[1]='e_over.gif';
cont[2]='r_over.gif';
cont[3]='k_over.gif';

function showCont(whichcont){
    if (ie) {
        lag0.innerHTML="<IMG SRC=menugfx/"+whichcont+" BORDER=0>";
                }else if (n){
        document.lag0.document.write("<font face=verdana,arial,helvetica size=2><IMG SRC=menugfx/"+whichcont+" BORDER=0></font>");
        document.lag0.document.close();
           
    }
}

I øvrigt er font-tags'ne kun til for, hvis der skal skrives tekst ind i laget. Så dem kan du såmænd godt slette her.

/VH

olebole> Så, nu skulle det være klaret. - og Tak

(Jeg må sgu se at lære det Javascript ordentligt!!)

/snedled

Jeg skal lige sige, at mine ændringsforslag kun var kosmetiske. Selvfølgelig betyder de kortere strenge også mindre tekst at downloade. Det mærker du måske ikke her, men prøv at se Adobes promotion-site:
http://www.smashstatusquo.com/
Det er FLOT!...men hold kæft, hvor tager det lang tid at d/l'e. Det er fordi, det er skrevet i GoLive. WYSIWYG programmer skriver altid en masse unødig kode, da de skal skrive meget generiske scripts, der tager højde for, hvad som helst. Skriver man derimod 'håndholdte dogme-scripts uden lyssætning', kan disse skræddersyes - og de bliver derfor meget mindre.

Du undrer dig måske over font-tags'ne kun er skrevet i 'ns' delen. Det er fordi NS ikke kan finde ud af at beholde de CSS betingelser, du har givet indenfor dine 'style' tags, når du skriver i laget :-( Det kan IE derimod.

"(Jeg må sgu se at lære det Javascript ordentligt!!)" ... Jeg kan varmt anbefale det! ;-)

/VH

Du burde nu lige få tildelt doeleman nogle points og få lukket spørgsmålet ;-)