HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

PRIMO ESEMPIO - pagina 2

PASSO DUE - Creiamo la tabella tenendo conto dello stile con il seguente codice:

<!--Per la corretta visualizzazione, indicare l'attributo (class="tabella") corrispondente;
L'identificatore della tabella (id="Menu") servirà per lo script che aggiungeremo.-->

<p align=center><table class="tabella" id="Menu">

<tr>

  • <!--Le celle della riga hanno tutte attributo class="primo"-->
  • <!-- location.href = è l'equivalente javascript di <a href = Sostituite ai puntini l'URL della pagina destinazione.-->
  • onClick= significa che il collegamento si attiva quando si fa clic sulla cella <td class="primo" onClick= "location.href ='...'">HOME<br><font size=-2>Pagina iniziale <td class="primo" onClick= "location.href ='...'">GUIDA <br><font size=-2>Linguaggio HTML <td class="primo" onClick= "location.href ='...'">JAVASCRIPT <br><font size=-2>Programmi, tutorial <td class="primo" onClick= "location.href ='...'">TARTAMONDO <br><font size=-2>Tartarughe parlanti <td class="primo" onClick= "location.href ='mailto:...'">CONTATTI <br><font size=-2>Ti aspettiamo </table></p>
  • Di seguito è pubblicata la tabella. I link funzionano, anche se vi consigliamo di sostituire le vostre voci ed i vostri link. Invece,se si passa con il mouse sopra le celle, le scritte si trasformano in corsivo e... basta.



    PASSO TRE - Prepariamo lo script per l'effetto dinamico che riassumiamo:

    1. Al passaggio del mouse su una cella
    2. Spostando il mouse fuori dal menu questo deve apparire a riposo
    Ecco come ad esempio deve apparire il menu quando si passa con il mouse sopra la quarta cella

     

    Per poter realizzare tali effetti dobbiamo innanzitutto capire come individuare le singole celle della tabella.

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


    ©2010 www.webfract.it