HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

SECONDO ESEMPIO - pagina 2

Lo stile descritto pagina 1 va inserito fra i tag <HEAD> ed </HEAD>. Non ne abbiamo capito il motivo ma, se si inserisce lo stile come css esterno, la tabella appare con i bordi staccati.
Oltre a richimare lo stile, ricordiamo di dare un nome univoco alla tabella, infatti ci servirà nello script per l'animazione.
In particolare daremo alla tabella l'identificatore id="Menu"

HOME GUIDA JAVASCRIPT GIOCHI CONTATTI

Pagina iniziale di www.webfract.it

Trucchi e malizie

Calcolatrice, Codice colori

Sudoku, crucipixel, gioco delle coppie

Scrivi, segnala un sito

Per cambiare aspetto alla tabella, abbiamo semplicemente sostituito
<table class="tabella" id="Menu"> al posto di <table>
<td class="primo"> al posto di <td> nelle celle della prima riga;
<td class="secondo"> al posto di <td> nelle celle della seconda riga;
<p class="collega"> al posto di <p> prima dei collegamenti.
Avremmo potuto scrivere un identificatore per ogni cella ma preferiamo trovarle attraverso il seguente metodo.

INDIVIDUIAMO LE SINGOLE CELLE DELLA TABELLA

Per poterci riferire alle righe 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, di nome riga1 che indichi la prima riga
var riga1=x[0].cells
ed una, di nome riga2 che indichi la seconda riga
var riga2=x[1].cells
Ecco come ci si può riferire ai vari elementi della tabella:

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

Come si vede, per riferirsi ai vari elementi, conviene fare uso di variabili strutturate.
Analogamente, faremo uso di variabili strutturate per indicare gli sfondi delle varie celle o le spiegazioni.

PREPARIAMO LO SCRIPT PER ANIMARE IL MENU

function cambia(n){
/* Nella variabile messaggi sostituite ordinatamente le vostre scritte ed i vostri link.
   Per facilitarvi le sostituzioni, abbiamo fatto precedere ogni elemento dal riferimento della cella
   Non dovete andare a capo. */
messaggi= new Array('','riga2[0] <a href="#">°°°</a> <a href="#">°°°</a>',
                       'riga2[1] <a href="#">°°°</a> <a href="#">°°°</a>',
                       'riga2[2] <a href="#">°°°</a> <a href="#">°°°</a>',
                       'riga2[3] <a href="#">°°°</a> <a href="#">°°°</a>',
                       'riga2[4] <a href="#">°°°</a> <a href="#">°°°</a>')
                       
/*Anche sfondo è una variabile strutturata per permettervi anche di inserire 
  immagini diverse a seconda delle celle*/
sfondo= new Array('','Ds.gif','Ds.gif','Ds.gif','Ds.gif','Ds.gif')
                       
// si identificano le righe della tabella di ID Menu, cioè la nostra 
    var x=document.getElementById('Menu').rows
    
    var riga1=x[0].cells //prima riga
    var riga2=x[1].cells  //seconda riga
                       
// si identificano le righe della tabella di ID Menu, cioè la nostra
    
    for (i=0;i<riga1.length;i++){
    
                       
// se la cella è quella su cui passa il mouse, allora
      if (i==n-1){
                       
// prima riga 
      riga1[i].style.width = "32%";  // larghezza al 32% 
      riga1[i].style.letterSpacing = "3"  // ampliamento dello spazio fra le lettere
      riga1[i].style.background='url(' + sfondo[n] +') center left no-repeat' // aggiunta dello sfondo
      riga1[i].style.borderRightWidth='2px'  // aggiunta dei bordi destro e sinistro
      riga1[i].style.borderLeftWidth='2px'
                       
// seconda riga 
      riga2[i].innerHTML='<p class="collega">'+ messaggi[n] // aggiunta dello stile e delle scritte
      riga2[i].style.borderBottomWidth='2px' // aggiunta dei bordi destro e sinistro e in basso
      riga2[i].style.borderRightWidth='2px'
      riga2[i].style.borderLeftWidth='2px'
      }
                       
// altrimenti 
    else {
       riga2[i].innerHTML=messaggi[0]
       riga1[i].style.letterSpacing = "1"
       riga1[i].style.width = "17%";
       riga1[i].style.background=sfondo[0];
       riga1[i].style.borderRightWidth='0px'
       riga1[i].style.borderLeftWidth='0px'
       riga2[i].style.borderBottomWidth='0px'
       riga2[i].style.borderRightWidth='0px'
       riga2[i].style.borderLeftWidth='0px'
    }
    }
}

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

©2010 www.webfract.it