Nwlapcug.com


Come fare il Mouseover su una pagina Web

Un passaggio del mouse è un effetto che avviene quando un utente sposta il cursore del mouse su un'immagine e l'immagine cambia di conseguenza. Mouseovers sono comunemente ottenuto utilizzando un linguaggio di scripting lato client come JavaScript e vengono utilizzati per creare pulsanti e menu a discesa.

Istruzioni

1

Inserire l'immagine che fungerà dall'immagine predefinita per eseguire l'effetto mouseover nel documento HTML. Eseguire questa operazione aggiungendo la seguente riga di codice nel corpo del documento HTML:

<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />

Essere sicuri di dare l'immagine di un attributo name, come questo sarà come il JavaScript farà riferimento a questa particolare immagine. Modificare l'origine "myMouseOutImage.jpg" per il nome dell'immagine da utilizzare come "backup" dello stato di mouseover.

2

Inserire un tag di script di apertura e di chiusura nella sezione "< head >" della pagina web. La sezione head di un documento HTML è sempre all'inizio del documento. Questo è dove verrà scritto il codice JavaScript per il mouseover affinché il browser capisce cosa fare con il codice. Sezione di testa dovrebbe essere simile al seguente:

&lt;head>

&lt;title> My First MouseOver &lt;/title>

&lt;script language='javascript'>

* Your functions will go here*

&lt;/script>

&lt;/head>3

Creare la funzione del 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 modifica l'immagine per l'immagine di mouseover che si specifica. Se il passaggio del mouse è un pulsante, questa immagine potrebbe essere una versione depressa del pulsante per simulare il mouse spingendo verso il basso nella pagina. Modificare l'origine "myMouseOverImage.jpg" per il nome dell'immagine che si desidera utilizzare come immagine di mouseover per lo stato "giù".

4

Creare la funzione del 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 di mouseover all'originale "su" Posizione immagine. Ricordatevi di cambiare l'origine "myMouseOutImage.jpg" al nome dell'immagine che usato per lo stato "up".

5

Assegnare le funzioni ai loro rispettivi eventi utilizzando l'elemento link per incapsulare l'elemento image mouseover:

&lt;a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> &lt;img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> &lt;/a>

Si noti che l'immagine è ora trasformato in un link con l'aggiunta di un tag di ancoraggio intorno ad esso. L'attributo "href" del collegamento non fa nulla, dato che il link non cambia la pagina, ma il collegamento è fondamentale per la creazione di un evento che attiverà le funzioni di evento "mouseOver" e "mouseOut".

6

Verifica che il tuo documento HTML è simile al seguente:

< html >

< head >

&lt;title> My First MouseOver &lt;/title>

&lt;script language='javascript'>

function mouseOn(){

document.images["myimage"].src = "myMouseOverImage.jpg";

}

function mouseOff(){

document.images["myimage"].src = "myMouseOutImage.jpg";

}

&lt;/script>

< / head >

< corpo >

&lt;a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()">&lt;img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />&lt;/a>

< / body >

< / html

Consigli & Avvertenze

  • JavaScript è case sensitive, quindi "mouseSul" non è lo stesso come "MouseSul."