JavaScript passo passo

Un esempio di effetto grafico utilizzando l'ogetto Image:

In questo esempio viene esaminato come alternare dinamicamente delle immagini ed i link ad esse collegati, che inviano a diverse sezioni del sito.
<script language="JavaScript">

<!-- //
 

// dichiaro 3 oggetti immagine da visualizzare alternativamente

var b1=new Image();

var b2=new Image();

var b3=new Image();

// dichiaro un oggetto immagine per creare un effetto di transizione

var bvuoto2=new Image();

// assegno i relativi sorgenti alle immagini tramite la proprietà src dell'oggetto Image

b1.src="../immagini/ilsito2.gif";

b2.src="../immagini/esempi2.gif";

b3.src="../immagini/risorse2.gif";

bvuoto2.src="../immagini/vuoto2.gif";

// dichiaro 6 variabili che, concatenate, formeranno l'indirizzo del link cui l'immagine collega

var h1='presentazione'; // indirizzo 1

var h2='esempi'; // indirizzo 2

var h3='risorse'; // indirizzo 3

var hvuoto='#'; // richiama la stessa pagina durante la transizione

var pre='../'; // prima parte dell'href

var post='.htm'; // parte finale dell'href

// dichiaro 3 Array contenenti l'immagine ed il relativo indirizzo assegnato

var bh1=new Array(b1,h1);

var bh2=new Array(b2,h2);

var bh3=new Array(b3,h3);

// dichiaro 1 Array contenente l'immagine di transizione con un indirizzo vuoto (#)

var bhv=new Array(bvuoto2,hvuoto);

// inserisco i 3 Array di immagini dinamiche in un Array per scorrerlo

var objArr1=new Array(bh1,bh2,bh3);

// inserisco 2 contatori

var i=0;

var y=0;

// dichiaro la variabile corrispondente al link dell'immagine nella collection document.links[],

// in questo caso corrispondente a 2

var nl=2;

function carica(){

// costruisco una condizione per alternare dinamicamente le variabili

     if(y>=1){

          if(i<objArr1.length){

          // per alternare dinamicamente indirizzi e immagini

               document.banner.src=objArr1[i][0].src;

               document.links[nl].href=pre + objArr1[i][1] + post;

               if(i<objArr1.length-1)i++;

               else i=0;

          }

          y=0;

     }

     else{

     // per visualizzare l'immagine vuota di transizione

           document.banner.src=bhv[0].src;

          document.links[2].href=bhv[1];

          y++;

     }

     // il temporizzatore che richiama la funzione

     var set_temp=setTimeout("carica()",1500);

     }

// -->

</script>

banner1 | oggetto image | il DOM