INDICE

MENU CHE SI ILLUMINA AL PASSAGGIO DEL MOUSE

SECONDA PARTE


Abbiamo già visto, nella prima parte , il modo più semplice per illuminare le voci di un indice.

Un secondo metodo è quello di inserire il menu in una tabella, aggiungendo una piccola immagine che cambia al passaggio del mouse.
Si tratta di attivare i due eventi:

OnMouseOver="..."
Al posto dei puntini si scrive quello che deve accadere quando il mouse passa sopra la singola cella
OnMouseOut="..."
Al posto dei puntini si scrive quello che deve accadere quando il mouse viene allontanato dalla singola cella

ESEMPIO 1

   LINK 1 
   LINK 2
   LINK 3 
   LINK 4 
   LINK 5 

ESEMPIO 2

   LINK 1 
   LINK 2
   LINK 3 
   LINK 4 
   LINK 5 

Negli esempi numero uno e due, che funzionano sia con MSIE che con FireFox, si alternano due piccole immagini: una di base ed una che compare al posto della prima al passaggio del mouse sulla singola colonna: nell'esempio numero uno si alternano due immagini, una di colore rosso e l'altra di colore verde; nell'esempio numero due, invece, l'immagine di base è un piccolo quadratino uguale al colore di sfondo della pagina. In questo modo sembra, quando il mouse è lontano dal menu, che non ci sia alcuna immagine.

L'effetto sulle immagini è indipendente da quello sui link, e quindi, volendo, possono essere cambiate, al passaggio del mouse, sia le une che le altre.

Ecco il codice per la tabella e le prime due righe dell'esempio di sinistra:

<table cellspacing=0 cellpadding=3 border=0>
<caption><h4><font color=red>ESEMPIO 1</caption></h4></font>
<tr><td OnMouseOver='document.imma1.src="pulsag.gif"' OnMouseOut='document.imma1.src="pulsar.gif"'>
<img src="pulsar.gif" align=left hspace=5 name="imma1">
&nbsp;&nbsp;&nbsp;<a href="#qui">LINK 1</a><&nbsp;
<tr><td OnMouseOver='document.imma2.src="pulsag.gif"' OnMouseOut='document.imma2.src="pulsar.gif"'>
<img src="pulsar.gif" align=left hspace=5 name="imma2">
&nbsp;&nbsp;&nbsp;<a href="#qui">LINK2</a><&nbsp;

</table>

SPIEGAZIONI

  • Innanzitutto viene inserita l'immagine che deve comparire quando il mouse non passa sopra la colonna. Il codice è quello usuale ma, in più, occorre dare un nome all'immagine stessa. In ogni cella l'immagine deve avere un nome diverso. Ad esempio noi abbiamo chiamato
    1. imma1 la prima immagine attraverso l'istruzione name="imma1"
    2. imma2 la seconda immagine attraverso l'istruzione name="imma2"
  • Negli effetti OnMouseOver, OnMouseOut occorre, al fine di caricare l'immagine desiderata, scrivere un codice tipo 'document.imma1.src="pulsag.gif"' in cui:
    1. Gli apici esterni sono obbligatori
    2. document è obbligatorio e rappresenta la pagina attualmente aperta
    3. imma1 è il nome dell'immagine inserita
    4. src="pulsag.gif" è obbligatorio. Fra gli apici va inserito il nome dell'immagine da caricare.
    5. Le parti del codice sono separate da un punto (obbligatorio)
    6. Dove abbiamo scritto <a href="#qui">, al posto di "#qui", inserire l'URL del collegamento. Noi abbiamo inserito un finto segnalibro per trasformare il mouse in una manina.
    Volendo aggiungere altre righe basta copiare il codice di una riga cambiando solo il nome delle immagini ed i link.


INDICEINDIETRO

©2005 www.webfract.it