|
|
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
- imma1 la prima immagine attraverso l'istruzione name="imma1"
- 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:
- Gli apici esterni sono obbligatori
- document è obbligatorio e rappresenta la pagina attualmente aperta
- imma1 è il nome dell'immagine inserita
- src="pulsag.gif" è obbligatorio. Fra gli apici va inserito il nome dell'immagine da caricare.
- Le parti del codice sono separate da un punto (obbligatorio)
- 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.
|