“Ad Rotator”

Navnet har denne applikation fået, fordi den hypigt anvendes til at vise forskellige annoncer i en kort tid.

I virkeligheden er der tale om en simpel udvidelse af de principper, der ligger bag de grafiske, JavaScript rollovers, jeg beskriver i artiklerne herom: JavaScript Rollovers.

Start

Et klik på ordet “Start” herover vil udløse visningen af 4 billeder efter hinanden

Billede der udskiftes

Script

<script type="text/javascript">
/*<![CDATA[*/
antal = 4
var imagesshow =new Array();
  for (i = 1; i<antal +1; i++){
    imagesshow[i] = new Image();
    imagesshow[i].src = "res/pix" + i + ".gif";
}
function swapImage(nr) {
  document.images.pix.src = imagesshow[nr].src
}

function start(){
  setTimeout('swapImage(1)',0)
  setTimeout('swapImage(2)',1000)
  setTimeout('swapImage(3)',2000)
  setTimeout('swapImage(4)',3000)
}
/*]]>*/
</script>

Bemærkninger

De springende punkter er her:

  1. Den variable antal, som fortæller hvor mange billeder der indgår i showet.
  2. Oprettelsen og autofyldningen af et JavaScript Array med de fire billeder. Denne teknik er forklaret i mine artikler om emnet Rollovergrafikken i Arrays og Automatisk fyldning af Arrays.
  3. Funktion swapImage(n), der tager et tal som parameter. Funktionens formål er at udskifte vædien af src-attributten til en img-markør med en ID pix med et billede fra mit Array, svarende til det nummer, der passeres til funktionen.
  4. Funktionen start(), der med et sekunds mellemrum udløser funktionen swapImage(n) med en ny værdi for n, indtil billede 4 er vist. Herefter stopper funktionen.

Bemærk, at jeg undgår name-attributten i 

<img src="res/pix0.gif" id="pix" alt="..." 
width="100" height="95" />

Denne attribut er ikke lovlig i henhold til xhtml 1, strict DTD'en. Det betyder, at vi nu må tilgå img-objektets src-attribut på siden via dette objekts ID, i dette tilfælde id="pix". Formen på denne reference er 

document.images.pix.src = imageAr[nr].src

– hvor "pix" er billedets ID og imageAr er det array, der holder de preloadede billeder i memory.

Denne side er senest opdateret: 20. June, 2006