HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

PRIMO ESEMPIO - pagina 3

INDIVIDUIAMO LE SINGOLE CELLE DELLA TABELLA

Ricorderete come abbiamo inserito la tabella nel body con questo codice iniziale:

<p align=center><table class="tabella" id="Menu">
<!--E' indispensabile, per lo stile, indicare l'attributo (class="tabella") corrispondente allo stile;
L'identificatore della tabella (id="Menu") servirà per lo script che aggiungeremo.-->

Per poterci riferire alle righe della tabella con uno script dovremo innanzitutto dichiarare una variabile, ad esempio di nome x

var x=document.getElementById('Menu').rows <!--document.getElementById restituisce l'elemento di cui è specificato l'ID tra parentesi -->
Dichiareremo poi una variabile, ad esempio di nome riga1, che indichi la prima riga
var riga1=x[0].cells
Ecco come ci si può riferire alle varie celle della tabella:

riga1[0] riga1[1] riga1[2] riga1[3] riga1[4]

Come si vede, per riferirsi ai vari elementi, conviene fare uso di variabili strutturate.
Analogamente, faremo uso di variabili strutturate per memorizzare gli sfondi delle varie celle o i colori delle scritte.



PASSO QUATTRO - Prepariamo lo script per animare il menu

function cambia(n){ //Notate il parametro n

 /*Nella variabile di nome sfondo, sostituite ordinatamente, e senza andare a capo, al posto dei puntini,
 i nomi delle immagini che volete compaiano nelle celle al passaggio del mouse. 
 Il primo elemento va lasciato vuoto. */
 
   sfondo= new Array('','...','...','...','...','...')

//Nella variabile di nome colori, sostituite ordinatamente, i vostri colori preferiti.

   colori= new Array('navy','#BF788B','#B380B7','#B380B7','#4D61E3','#BC6467')

    var x=document.getElementById('Menu').rows
    var riga1=x[0].cells
  
    
    //Ciclo enumerativo che scorre tutte le celle della prima e unica riga: da 0 a riga1.length
    
    for (i=0;i<riga1.length;i++){
    
      // Se la cella che viene individuata è quella su cui passa il mouse si eseguono le operazioni previste
      
      if (i==n-1){
      riga1[i].style.width = "28%"; // La cella occupa il 28% della tabella
      riga1[i].style.color = colori[n]; // Il colore della scritta è quello prescelto
      riga1[i].style.letterSpacing = "2" // Aumenta lo spazio fra le lettere
      riga1[i].style.background='url(' + sfondo[n] +') center right no-repeat' // Viene aggiunto lo sfondo
      riga1[i].style.borderRightWidth='1px' // Viene aggiunto un bordo a sinistra della cella
      }  
      
      // altrimenti
      
    else {
       riga1[i].style.width = "18%"; // La cella occupa il 18% della tabella
       riga1[i].style.background=sfondo[0];  // nella cella non compare alcuno sfondo
       riga1[i].style.borderRightWidth='0px'  // Sparisce il bordo a sinistra della cella
       riga1[i].style.color = colori[0];  // Il colore della scritta è di nuovo navy
       riga1[i].style.letterSpacing = "1"  // Lo spazio fra le lettere torna normale
       }
    }
}

PRIMO ESEMPIO Pagina 1 2 3 4 5            SECONDO ESEMPIO Pagina 1 2 3 4          Indice     


©2010 www.webfract.it