|
 | |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| EchoEcho.Com CORSI COMPLETI |
HOME  CORSI JAVASCRIPT
AVANZATI
|
EchoEcho.Com STRUMENTI & RISORSE |
|||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| | ||||||||||||||||
| | ||||||||||||||||
| | ||||||||||||||||
|
| ||||||||||||||||
|
|
|
|
Dopo aver aggiunto l'immagine del bottone alla pagina web, devi inserire degli elementi nel tag dell'immagine. Soltanto dopo puoi inserire il javascript che cambia l'immagine quando il mouse viene fatto scorrere sopra di essa. La prima metà di questa pagina è dedicata al codice base HTML necessario ad inserire un'immagine in modo che javascript possa riferirsi ad essa. La seconda parte è dedicata al javascript che cambia l'immagine in relazione al passaggio del mouse. IL CODICE HTML Un'immagine regolare funzionante come un bottone-link appare in questa maniera nel codice HTML:
Per rendere possibile a javascript di cambiare l'immagine, dobbiamo darle un nome che verrà utilizzato da javascript come riferimento. Nel nostro caso, ecco come apparirà l'HTML:
Ora il bottone ha un nome che sarà usato come riferimento quando vorremo che javascript lo sostituisca con un'altra immagine. Dobbiamo dire al browser che dovrà eseguire una funzione in grado di sostiutire l'immagine, quando il mouse verrà fatto scorrere sull'immagine. Questo si ottiene con l' eventoonmouseOver. In più dobbiamo anche dire al browser che quando il mouse viene fatto scorrere fuori dall'area del bottone, entrerà in gioco un altro javascript per ripristinare l'immagine iniziale. Questo si ottiene con l'eventoonmouseOut. Il codice completo HTML sarà dunque:
Questo è tutto quello che c'è da fare per quanto riguarda la parte HTML della pagina. Il resto viene fatto con javascript. Nota: Gli eventi-mouse si aggiungono al tag <a href> - NON al tag image. Questo perché i browser non cercano eventi di tipo mouseover sulle immagini. Anche se sembra stupido, è vero. Perciò si possono animare le immagini soltanto quando queste funzionano come links. Siccome i browser accettano gli eventi mouseover soltanto sui link, registreranno un evento riguardante il mouse su un'immagine, se l'immagine è un link. IL CODICE JAVASCRIPT Il javascript che segue va inserito nell sezione "head" della tua pagina web.
Se vuoi più di un bottone per pagina, devi solamente copiare ogni riga riferita al bottone 1 e chiamare questo button2, button3, in relazione al numero di bottoni che vuoi inserire nella pagina.
|
|
| |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| | ||||||||||||||||||
| | ||||||||||||||||||
| | ||||||||||||||||||
| EchoEcho.Com CORSI COMPLETI |
|
EchoEcho.Com STRUMENTI & RISORSE |
|||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
(c) Copyright 1998-1999 NetKontoret - All Rights Reserved | |||||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
| |||||||||||||||||||
