HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

SECONDO ESEMPIO - pagina 3

Il menu che abbiamo in mente è quasi funzionante: si anima come avevamo previsto ma, quando il mouse lascia la tabella, l'ultima cella sulla quale era passato il mouse resta attiva.
Se infatti integriamo il codice per creare la tabella aggiungendo, nelle celle della prima riga, le parti scritte in blu e lasciamo senza alcun testo quelle della seconda riga:

<p align=center><table class="tabella" id="Menu">
<tr><td class="primo" onMouseOver="cambia(1)">HOME
    <td class="primo" onMouseOver="cambia(2)">GUIDA
    <td class="primo" onMouseOver="cambia(3)">JAVASCRIPT
    <td class="primo" onMouseOver="cambia(4)">GIOCHI
    <td class="primo" onMouseOver="cambia(5)">CONTATTI

<tr><td class="secondo">
    <td class="secondo">
    <td class="secondo">
    <td class="secondo">
    <td class="secondo">
</table></p></center>

otteniamo il seguente risultato (fare una prova):

Dobbiamo fare in modo di variare il menu quando il mouse si allontana da esso.

PREPARIAMO LO SCRIPT PER FAR TORNARE IL MENU COME ALL'INIZIO

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

Inseriamo le parti precedenti e seguenti il menu all'interno dei tag <div onMouseOver="aggiorna()"> e </div>

In questo modo il menu tornerà a riposo senza alcun problema.
Nella prossima pagina troverete il codice completo da scaricare.

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

©2010 www.webfract.it