Preload rollovergrafikken

Eksemplet med en Kvikskift rollover er jo ikke særligt realistisk. Det er ret sjældent, du har brug for at lave rollover på kun én knap.

I “det virkelige liv” har vi ofte både 5, 10 og 15 knapper, der skal have en sådan effekt.

På denne side har jeg lavet en udførelse med 4 knapper for at illustrere, at de principper, vi så på på siden Kvikskift rollover kan udvides til et vilkårligt antal knapper.

Starten på det hele er altid at oprette det JavaScript i websidens head-del, der preloader alle billederne:

<script type="text/javascript">
img1on = new Image();
img1on.src = "/rollover/res/img1on.png"; 
img2on = new Image();
img2on.src = "/rollover/res/img2on.png";  
img3on = new Image();
img3on.src = "/rollover/res/img3on.png"; 
img4on = new Image();
img4on.src = "/rollover/res/img4on.png"; 

img1off = new Image();
img1off.src = "/rollover/res/img1off.png"; 
img2off = new Image();          
img2off.src = "/rollover/res/img2off.png"; 
img3off = new Image();
img3off.src = "/rollover/res/img3off.png"; 
img4off = new Image();
img4off.src = "/rollover/res/img4off.png"; 
</script>

Når det er sket, kan du referere de 4 knapper på samme måde, som vi gjorde i eksempel med Kvikskift rolloveren, blot du tager hensyn til, at du nu har 4 knapper, og derfor skal have 4 forskellige ID'er:

<p class="eksempel">
<a href="#" 
onmouseover="document.images.knap1.src=img1on.src"
onmouseout="document.images.knap1.src=img1off.src">
<img src="res/img1off.png" id="knap1" width="31" 
height="31" alt="Knap 1" /></a>
<a href="#" 
onmouseover="document.images.knap2.src=img2on.src"
onmouseout="document.images.knap2.src=img2off.src">
<img src="res/img2off.png" id="knap2" width="31" 
height="31" alt="Knap 2" /></a>
<a href="#" 
onmouseover="document.images.knap3.src=img3on.src"
onmouseout="document.images.knap3.src=img3off.src">
<img src="res/img3off.png" id="knap3" width="31" 
height="31" alt="Knap 3" /></a>
<a href="#" 
onmouseover="document.images.knap4.src=img4on.src"
onmouseout="document.images.knap4.src=img4off.src">
<img src="res/img4off.png" id="knap4" width="31" 
height="31" alt="Knap 4" /></a>
</p>

Resultatet af øvelsen ser du herunder:

Knap 1 Knap 2 Knap 3 Knap 4

Bortset fra at det er en god idé, for at bevare overblikket, at have en systematik i navngivningen, er der intet til hinder for, at filnavnene på grafikfilerne kan være hvad som helst, jytte.gif, hanne.gif, louise.gif og mette.gif, eller jupiter.jpg, saturn.jpg, uranus.jpg og neptun.jpg, alt efter, hvad der nu er aktuelt for dig. Grafikken behøver jo heller ikke at være 4 næsten ens knapper, som her. Blot skal de to udgaver af grafikken, der skal erstatte hinanden, have samme størrelse (højde og bredde).

Den moderne metode

Jeg havde tidligere et par artikler i denne sektion, der beskrev nogle smarte JavaScript funktioner, der kunne bruges via et funktionskald ved mouseover og mouseout.

Alle sådanne genveje er overflødige, når vi bruger W3C's dokumentobjektmodel.

Hermed har vi faktisk konstrueret et universalt anvendeligt script til alle mulige rollovers. Vi kan imidlertid smukkesere på koden og mindske vores tastearbejde en del ved at lave et Array af billederne og dernæst fylde dette Array automatisk.

For at kunne gøre dette er det nødvendigt, at vi kigger lidt på teknikken bag et Image Array. Det sker på websiden Grafikken i Arrays.

Syntaksen for manipulation med et element på en webside er i disse artikler ændret til at være i bedre overensstemmelse med W3C's dokumentobjektmodel (Document Object Model, DOM) end mine tidligere artikler om emnet.

Forskellen er lille, men af stor betydning. I stedet for at tilgå img-elementet via dets name:
document.knap.src
tilgås det nu via dets id:
document.images.ID.src

1 2 3 4 5 6 7 8 9 10

Denne side er senest opdateret: 3. December, 2006