HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

PRIMO ESEMPIO - pagina 4

PASSO CINQUE

- Prepariamo lo script per far tornare il menu come all'inizio 

 function aggiorna(){
    var x=document.getElementById('Menu').rows
    var riga1=x[0].cells
     for (i=0;i < riga1.length;i++){
       riga1[i].style.width = "20%";
       riga1[i].style.background='';
       riga1[i].style.borderRightWidth='0px'
       riga1[i].style.color = colori[0];
       riga1[i].style.letterSpacing = "1"
     }
 }

PASSO SEI

- Integriamo il codice della tabella (pag. 2) aggiungendo le parti scritte in blu: 

<p align=center><table class="tabella" id="Menu">
<td class="primo" onMouseOver="cambia(1)" onMouseOut="aggiorna()" onClick= "location.href = '...'">
     HOME<br><font size=-2>Pagina iniziale
<td class="primo" onMouseOver="cambia(2)" onMouseOut="aggiorna()" onClick= "location.href = '...'">
     GUIDA<br><font size=-2>Linguaggio HTML
<td class="primo" onMouseOver="cambia(3)" onMouseOut="aggiorna()" onClick= "location.href = '...'">
     JAVASCRIPT<br><font size=-2>Programmi, tutorial
<td class="primo" onMouseOver="cambia(4)" onMouseOut="aggiorna()" onClick= "location.href = '...'" >
     TARTAMONDO <br><font size=-2>Tartarughe parlanti
<td class="primo" onMouseOver="cambia(5)" onMouseOut="aggiorna()" onClick= "location.href = '...'">
     CONTATTI <br><font size=-2>Ti aspettiamo
</table></p>

Ogni cella della tabella cambia quando ci si passa sopra con il mouse (effetto onMouseOver), e di nuovo quando il mouse si allontana (effetto onMouseOut)

Vediamo ora che succede quando, ad esempio, si fa clic sulla cella il cui testo è TARTAMONDO e quindi si attiva la funzione cambia(4).
Nella funzione cambia(n) al posto di n viene sostituito 4 e dunque vengono operati i cambiamenti nella cella riga1[3] (notate infatti che nel confronto si fa riferimento ad n-1). Ad esempio
     riga1[i].style.color = colori[n] diventa
riga1[3].style.color = colori[4]
Questo perché, nella variabile colori il primo elemento, cioè colori[0] è navy, il colore di base delle scritte, e colori[4] è proprio #4D61E3. Non ci resta che riassumere, nella prossima pagina, tutto il codice, anche per permettervi di copiarlo.

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

©2010 www.webfract.it