Rollovergrafikken i Arrays

Ved at anvende JavaScript Arrays kan opbygges et meget kompakt og meget universelt anvendelig rollover script.

Teknikken byder på en fælde, som det er let at falde i, hvis man ikke er opmærksom på Array'ets karakter. Fælden og hvordan du undgår at falde i den er også beskrevet her på siden.

Knap 1 Knap 2 Knap 3 Knap 4

På websiden Preload rollovergrafikken stiftede du bekendtskab med en metode til at foretage preload af alle de billeder, du skal bruge i en rollover, så du er sikker på, at alle billeder er i browserens cache, når siden vises.

Ved at anvende Arrays kan opbygges et meget kompakt og meget universelt anvendelig rollover script.

Et JavaScript Array er en slags tabel af variable, der sin simpleste form simpelthen er en liste over værdier, der indeholdes i Array'et. Her ses to Arrays, hver med et indhold af 4 billeder. De to Arrays skal have nogle variabel-navne:

var imageson = new Array("image1on.gif", 
"image2on.gif", "image3on.gif", "image4on.gif")
var imagesoff = new Array("image1off.gif", 
"image2off.gif", "image3off.gif", "image4off.gif")

Har vi nu brug for et bestemt billede i et sådant Array, kan vi referere det via dets nummer i Array'et:

document.images['id'].src=imageson[nr]

- hvor nr er et tal, der repræsenterer billedets placering i Array'et. Her er det vigtigt at huske, at de variable i et Array nummereres fra 0 og opefter. Indsætter vi et tilfældigt tal i stedet for nr, får referencen følgende udseende:

document.images['img3'].src=imagesOn[2]

– og dette kan læses på følgende måde: Det tredie billede i rollover'en – med en id="img3" – er lig med det tredie billede i Array'et.(Husk, vi tæller fra 0 i et Array).

Bygger vi nu en rollover med denne viden, kommer den til at se ud som vist i kildekoden herunder:

<script type="text/javascript">
   <!--
   var imagesOn = new Array("image1on.gif", 
   "image2on.gif", "image3on.gif", "image4on.gif")
   var imagesOff = new Array("image1off.gif", 
   "image2off.gif", "image3off.gif", "image4off.gif")

  function imgOn(nr){
    document.images['img'+nr].src=imageson[nr-1]
  }
  function imgOff(nr){
    document.images['img'+nr].src=imagesoff[nr-1]
	}
//-->
</script>

For at kunne fungere, er det nødvendigt – som i det første eksempel (på siden Preload rollovergrafikken) – at mouseover og mouseout kalder funktionerne imgOn() og imgOff() og passerer oplysninger til disse funktioner om, hvilken knap, det er, musemarkøren aktuelt passerer henover eller forlader. Denne gang ser disse funktionskald imidlertid lidt anderledes ud:

<a href="#" 
onmouseover="imgOn(1)" 
onmouseout="imgOff(1)">
<img id="img1" alt="Knap 1" src="image1off.gif" 
width="27" height="27" /></a>
<a href="#" 
onmouseover="imgOn(2)" 
onmouseout="imgOff(2)">
<img id="img2" alt="Knap 2" src="image2off.gif" 
width="27" height="27" /></a>
<a href="#" 
onmouseover="imgOn(3)" 
onmouseout="imgOff(3)">
<img id="img3" alt="Knap 3" src="image3off.gif" 
width="27" height="27" /></a>
<a href="#" 
onmouseover="imgOn(4)" 
onmouseout="imgOff(4)">
<img id="img4" alt="Knap 4" src="image4off.gif" 
width="27" height="27" /></a>

Hvad du skal gøre for at anvende dette script er at lave dine egne on og off knapper og sætte dem ind i stedet for image1off.gif og image1off.gif, image2on.gif og image2off.gif osv.

Hvis alle knapper er ens, som i eksemplet her, kan du godt nøjes med 2 knapper, én for off-tilstanden og én for on-tilstanden.

Den del af scriptet, som sørger for oprettelsen af knapperne, kommer i så fald til at se således ud:

var imagesOn=new Array("imageon.gif", "imageon.gif", 
"imageon.gif", "imageon.gif")
var imagesOff=new Array("imageoff.gif", "imageoff.gif", 
"imageoff.gif", "imageoff.gif")

– og alle de indsatte knapper i selve knappanelet ville så være imageoff.gif.

Det er jo ikke særlig ophidsende med det samme eksempel flere gange, men pointen her er jo heller ikke rolloverens funktionalitet, men hvorledes vi udvikler et virkelig effektivt universalscript til at lave sådanne rollovers med.

For at blive færdig med dette, bør vi også lige kigge på muligheden for at fylde Array'et automatisk. Det sker på websiden Automatisk fyldning af Arrays.

1 2 3 4 5 6 7 8 9 10

Denne side er senest opdateret: 2. December, 2006