October 8
Un passaggio del mouse è un effetto che si verifica quando un utente sposta il cursore del mouse sopra l'immagine e l'immagine cambia di conseguenza. Mouseovers si ottengono comunemente utilizzando un linguaggio di scripting lato client come JavaScript e sono utilizzati per creare pulsanti e menu a discesa.
1 Inserire l'immagine che fungerà da l'immagine di default per eseguire l'effetto mouseover nel documento HTML. A tale scopo, aggiungere la seguente riga di codice nel corpo del documento HTML:
<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />
Assicurarsi di dare l'immagine di un attributo name, in quanto questo sarà come farà riferimento questa immagine particolare il JavaScript. Cambiare la sorgente "myMouseOutImage.jpg" per il nome dell'immagine che si desidera utilizzare come stato "up" del passaggio del mouse.
2 Inserire un tag script di apertura e chiusura nella "<head>" sezione della pagina web. La testata di un documento HTML è sempre all'inizio del documento. Questo è dove sarà scritto il codice JavaScript per il passaggio del mouse in modo che il browser capisce che cosa fare con il codice. La sezione di testa dovrebbe essere simile al seguente:
<head>
& Lt; title> Il mio primo MouseOver & lt; / title>
& Lt; script language = 'javascript'>
* Le funzioni andranno qui *
& Lt; / script>
& Lt; / head>
3 Creare la funzione di gestore per l'evento "onMouseOver" inserendo il seguente JavaScript nella sezione script che è stato inserito nella sezione head della pagina web:
function mouseOn(){
document.images [ "myimage"] src = "myMouseOverImage.jpg.";
}
Questa funzione cambia l'immagine al passaggio del mouse immagine che si specifica. Se il passaggio del mouse è un pulsante, questa immagine potrebbe essere una versione premuto il pulsante per simulare il mouse spingendolo verso il basso nella pagina. Cambiare la sorgente "myMouseOverImage.jpg" per il nome dell'immagine che si desidera utilizzare come immagine mouseover per lo stato "verso il basso".
4 Creare la funzione di gestore per l'evento "onMouseOut" inserendo il seguente JavaScript nella sezione script che è stato inserito nella sezione head della pagina web:
function mouseOff(){
document.images [ "myimage"] src = "myMouseOutImage.jpg.";
}
Questa funzione ripristina l'immagine mouseover all'immagine posizione originale "up". Ricordatevi di cambiare la fonte "myMouseOutImage.jpg" per il nome dell'immagine è stato utilizzato per lo stato "up".
5 Assegnare le funzioni ai rispettivi eventi utilizzando l'elemento di collegamento per incapsulare l'elemento di immagine passaggio del mouse:
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> <img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> </a>
Si noti che l'immagine è ora trasformato in un collegamento con l'aggiunta di un tag di ancoraggio intorno ad esso. L'attributo "href" del collegamento non fa nulla dal momento che il link non cambiare pagina, ma il collegamento è essenziale per la creazione di un evento che attiverà l' "mouseOver" e le funzioni degli eventi "mouseOut".
6 Verificare che il documento HTML è simile a quanto segue:
<Html>
<Head>
<title> My First MouseOver </title>
& Lt; script language = 'javascript'>
Funzione mouseOn () {
document.images [ "myimage"] src = "myMouseOverImage.jpg.";
}
funzione si allontana il mouse () {
document.images [ "myimage"] src = "myMouseOutImage.jpg.";
}
& Lt; / script>
</ Head>
<Body>
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"><img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /></a>
</ Body>
</ Html