Pagine Web utilizzare funzioni JavaScript per migliorare l'interattività con gli elementi quali le forme. Moduli nelle pagine HTML possono contenere più elementi di input utente, inclusi i pulsanti. Utilizzando JavaScript, sviluppatori Web possono aggiungere un ulteriore livello di interazione dell'utente con pulsanti e altri elementi. Usi comuni di onMouseOver funzionalità coinvolgono cambiando l'aspetto di un elemento quando l'utente sposta il mouse su di esso.

Elemento Button

Pagine Web possono includere elementi button in due modi. Il tag < button > definisce un elemento button all'interno di un form HTML come segue:

< pulsante di tipo = "pulsante" id = "mybutton" > testo pulsante visibile < / button >

In alternativa, è possibile utilizzare un elemento di input HTML con il tipo di pulsante, come nel codice di esempio riportato di seguito:

< tipo input = "pulsante" value = "Testo pulsante visibile" id = "mybutton" / >

Entrambi questi vengono visualizzati in modo simile all'interno del browser dell'utente. Gli utenti possono interagire con un elemento button utilizzando clic del mouse. Il markup HTML per un pulsante determina il testo visibile che viene visualizzato su di esso, utilizzando il contenuto indicato tra i tag < button > di apertura e di chiusura o l'attributo value elencati all'interno del tag di apertura di ingresso.

Evento OnMouseOver

Per creare un effetto onMouseOver all'interno delle pagine Web, è necessario indicare al browser per ascoltare l'evento che si verifica quando l'utente sposta il mouse sopra un elemento HTML specifico. Il seguente codice di markup estesa viene illustrata l'aggiunta di listener di eventi all'elemento button, specificando una funzione JavaScript da chiamare quando si verifica l'evento:

< pulsante di tipo = "pulsante" id = "mybutton" onmouseover="onButton(this.id)" > testo pulsante visibile < / button >

Il codice passa l'attributo ID dell'elemento come parametro a una funzione JavaScript. Di seguito viene illustrato lo stesso processo per l'elemento input:

< tipo input = "pulsante" value = "Testo pulsante visibile" id = "mybutton" onmouseover="onButton(this.id)" / >

In entrambi i casi, il browser rileva l'utente rotolamento suo mouse sopra l'elemento pulsante, chiamando la funzione specificata quando questo accade.

Funzione JavaScript

È possibile definire la funzione JavaScript che si desidera eseguire sugli eventi del mouse all'interno della sezione head della pagina o uno script separato. Il contorno di funzione di esempio riportato di seguito viene illustrato l'alterare l'aspetto del pulsante quando l'utente sposta il mouse su di esso:

Function onButton(theButton) () {

Document. getElementById (theButton).style.color = "#FF0000";

}

Questo banale esempio modifica il colore di testo del pulsante, ma è possibile aggiungere tutte le funzionalità che necessarie all'interno di questa funzione JavaScript.

OnMouseOut opzione

Implementando una funzione onMouseOver spesso anche le pagine forniscono una funzione onMouseOut. L'evento mouseover si verifica quando l'utente sposta il cursore del mouse sull'elemento da una posizione esterna ad esso. L'evento mouseout si verifica quando l'utente sposta il cursore del mouse fuori l'elemento nell'area pagina esterna. Questo fornisce la capacità di ripristinare l'aspetto di un elemento quando il mouse si allontana. Nell'esempio di codice riportato di seguito può essere visualizzato all'interno dell'elemento, chiamare la funzione:

onmouseout="offButton(this.ID)"

La seguente funzione aggiuntiva viene illustrato ripristinando le proprietà di stile dell'elemento se era originariamente nero:

Function offButton(theButton) () {

Document. getElementById (theButton).style.color = "#000000";

}