Codice Javascript
Qui andimo a spiegare come sono stati realizzati gli effetti di animazione delle immagni.
|
|
1 <!DOCTYPE html> 2 <html lang="it"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Risotti</title> 7 <link href="../../css/home.css" rel="stylesheet" type="text/css" /> 8 <style type="text/css"> 9 body { 10 background-repeat: no-repeat; 11 background-position:center; 12 background-position:top; 13 background-color: #FBF3C4; 14 background-attachment: fixed; 15 } 16 </style> 17 <script> 18 var slide_images = new Array(); 19 var pth_slide = "../../img/confetture/"; 20 21 function slideshow(){ 22 for (i = 0; i < slideshow.arguments.length; i++){ 23 slide_images[i] = new Image(); 24 slide_images[i].src = pth_slide + slideshow.arguments[i]; 25 } 26 } 27 28 function rol(x, y){ 29 var im = document.getElementById("foto"); 30 if (x == 1) im.src = y; else im.src = "../../img/imgdef.jpg"; 31 } 32 </script> 33 </head> 34 <body> 35 <p class="titcol">Le Confetture</p> 36 <table width="200" border="1" align="center"> 37 <tr> 38 <td valign="top"> 39 <img src="../../img/confetture/confetture-ico.jpg" name="slide" id="slide" 40 width="300" height="200" border="0" /> 41 <p> </p> 42 <img src="../../img/imgdef.jpg" name="foto" id="foto" width="300" 43 height="200" border="0" /> 44 </td> 45 <td valign="top"> 46 <table width="480" border="0" align="center" cellpadding="0" cellspacing="0"> 47 <tr> 48 <td> 49 <p class="men"> 50 <a href="confgen.html" onmouseover="rol(1,'../../img/confetture/\n\ 51 confetture-ico.jpg')" onmouseout="rol(0)">Le Confetture</a> 52 </p> 53 <p class="men"> 54 <a href="albicocche/albicocche.html" onmouseover="rol(1,'../../img/\n\ 55 confetture/albicocche-ico.jpg')" onmouseout="rol(0)">Albicocche</a> 56 </p> 57 <p class="men"> 58 <a href="castagne/castagne.html" onmouseover="rol(1,'../../img/\n\ 59 confetture/castagne-ico.jpg')" onmouseout="rol(0)">Castagne</a> 60 </p> 61 </td> 62 </tr> 63 </table> 64 </td> 65 </tr> 66 </table> 67 <script> 68 //Configura il percorso delle immagini 69 slideshow( 70 "confetture-ico.jpg", 71 "albicocche-ico.jpg", 72 "castagne-ico.jpg" 73 ); 74 //configura la velocità dello slideshow in millisecondi 75 var slideshowspeed = 1000; 76 77 var w_slide = 0; 78 function sli_slide(){ 79 if (!document.images) 80 return; 81 document.images.slide.src = slide_images[w_slide].src; 82 if (w_slide < slide_images.length - 1) 83 w_slide++; 84 else 85 w_slide = 0; 86 setTimeout("sli_slide()", slideshowspeed); 87 } 88 sli_slide(); 89 </script> 90 </body> 91 </html> |
Iniziamo da qui:
69 slideshow( 70 "confetture-ico.jpg", 71 "albicocche-ico.jpg", 72 "castagne-ico.jpg" 73 ); 18 var slide_images = new Array(); 19 var pth_slide = "../../img/confetture/"; 20 21 function slideshow(){ 22 for (i = 0; i < slideshow.arguments.length; i++){ 23 slide_images[i] = new Image(); 24 slide_images[i].src = pth_slide + slideshow.arguments[i]; 25 } 26 } |
Come si può notare la funzione:
slideshow("confetture-ico.jpg","albicocche-ico.jpg","castagne-ico.jpg");
Ha tre argomenti ma potrebbe avere un qualsiasi numero di argomenti, in java script ciò è permesso. Ogno argomento è il nome di una immagine e l'ordine degli argomenti sarà poi l'ordine in cui verranno visualizzate leimmagini.
var slide_images = new Array();
è un nuovo array che conterrà le immagini
var pth_slide = "../../img/confetture/";
è il percorso che ci permetterà di trovare le immagini.
Ora veniamo alla funzione slideshow()
Questa funzione si occuperà di riempire l'array "slide_images" con le immagini e dare a ciascuna di esse il percorso ed il nome dell'immagine impostandolo nella proprità src. Farà questo utilizzando il ciclo for.
slideshow.arguments.length mi darà il numero degli argomentii passati in questo es. tre il ciclo dice per i che va da 0 a 2 ossia i sarà successivamente:0 poi 1 poi 2 inseriamo nell'array le immgini. Creao ad ogniciclo un immagine: slide_images[i] = new Image(); e gli attribuisco il sorgente: slide_images[i].src = pth_slide + slideshow.arguments[i]; per ciascun ciclo avremo:
slide_images[0].src ="../../img/confetture/"+ slideshow.arguments[0];
slide_images[1].src ="../../img/confetture/"+ slideshow.arguments[1];
slide_images[2].src ="../../img/confetture/"+ slideshow.arguments[2];
Ora il nostro array contiene tutte le immagini che dovranno scorrere.
Questo però è un approccio piutttosto antico ora più modernamente potremo usare quest'altro approccio:
18 var slide_images = new Array(); 19 var pth_slide = "../../img/confetture/"; 20 21 function slideshow(...imageNames){ 22 imageNames.forEach((imageName, i) => { 23 slide_images[i] = new Image(); |
...imageNames questo è un array che contiene gli argomenti inseriti,
(imageName, i) => {} questa è una funzione anonima (ossia che non ha un nome) cosciuta anche come "Arrow function" tra le parentesi ci sono gli argomenti (che possonoessere fino a tre) poi l afreccia => ed il blocco {}.
imageNames.forEach((imageName, i) => {blocco} il metodo foreEach dell'array imageNames eseguirà per ciascun elemento dell'array la funzione anonima. Gli argomenti in questo caso sono due il primo "imageName" è l'argomento, che qui rappresenta il nome dell'immagine il secondo "i" è l'indice corrispondente. Il contenuto del blocco è simile alla versione precedente.
Eseguita la funzione slideshow() noi avremo l'array slide_images carico delle immagini.
Sarà la funzione sli_slide() a mettere in moto la visualizzazioe continua e ciclica delle immagini:
76 var slideshowspeed = 1000; 77 var w_slide = 0; 78 function sli_slide(){ 79 if (!document.images) 80 return; 81 document.images.slide.src = slide_images[w_slide].src; 82 if (w_slide < slide_images.length - 1) 83 w_slide++; 84 else 85 w_slide = 0; 86 setTimeout("sli_slide()", slideshowspeed); 87 } 88 sli_slide(); |
Se non ci sono immagini esci dalla funzione senza fare nulla.
slide è l'id dell'immagine preposta alla visualizzazione ciclica.
document.images.slide.src = slide_images[w_slide].src;
Sta ad indicare di mettere nella proprietà src dell'imagine con id= "slide" l'indirizzo memorizzato nell'elemento[0]
dell'array slide_images[0].src. La prima immagine verrà visualizzata. Ora si passa ad aggiornare l'indice w_slide fino a che l'indice è minore di 2 viene incrementato quando è uguale a 2 viene riportato a 0 e così via. Ogni immagine verrà visualizzata per il tempo di un secondo.
Due parole per i rollover:
28 function rol(x, y){ 29 var im = document.getElementById("foto"); 30 if (x == 1) im.src = y; else im.src = "../../img/imgdef.jpg"; 31 } |
foto è l'id dell'immagine preposto alla visualizzazione dell'immagine statica corrispondente s ciascun link. im rappresenta questa immagine. se il primo argomento della funzione rol(x, y) è uguale a 1 nella proprietà src dell'immagine im metteremo l'undirizzo in y altrimenti reimposteremo uìl'immagine che rappresenta il colore di sfondo. L'effetto sarà che quando passiamo con il mouse sopra il link comparirà l'immagine relativa, es se passo sopra a Castagne comparirà l'immagine delle castagne, quando esco da Castagne l'immagine scomparirà.