Utilizzando il codice HTML e JavaScript, gli sviluppatori possono creare effetti interattivi nelle pagine Web. Gli elementi HTML di una pagina possono includere attributi di listener di eventi che consentono di rilevare l'interazione dell'utente con il mouse, ad esempio lo spostamento su un particolare elemento. Quando si verifica tale evento, il browser dell'utente può chiamare una funzione JavaScript. La funzione JavaScript può implementare un effetto come alterare l'aspetto dell'elemento mentre mouse dell'utente si trova su di esso.

Markup HTML

La funzione di "onmouseover" è attivata quando gli utenti tira il mouse sopra un elemento HTML. Il seguente codice di esempio viene illustrato:
< div id = "contentElem" onmouseover="onElement(this.id)" > qui è il contenuto dell'elemento < / div >

Questo indica che il browser dell'utente Web per tenere traccia dell'utente spostando il mouse sopra l'elemento. Quando questo accade, il browser esegue la funzione JavaScript specificata, passando il valore dell'attributo ID dell'elemento come parametro. Questo consente alla funzione di identificare l'elemento all'interno della pagina nel suo complesso, così può implementare un effetto visivo.

Funzioni JavaScript

La funzione JavaScript specificata come attributo di evento elemento HTML può essere inclusa nella sezione head della pagina Web o in uno script separato. Nell'esempio di codice riportato di seguito viene illustrato il contorno di funzione all'interno della testa di pagina:
< head >
< script type = "text/javascript" >
Function onElement(theElement) () {
implementazione della funzione
}
< / script >
< / head >

Per fare riferimento a una funzione in un file di script separato, il codice seguente venga visualizzato, anche nella sezione head:
< script type = "text/javascript" src="myfunctioncode.js" >< / script >

In questo caso, lo script è nella stessa directory della pagina Web. All'interno dello script, il contorno di funzione può essere incluso direttamente, come segue:
Function onElement(theElement) () {
implementazione della funzione
}

Contenuto di funzione

Il contenuto di una funzione di "onmouseover" dipenderà naturalmente il suo scopo. Nell'esempio di codice riportato di seguito viene illustrata una possibile implementazione:
Document. getElementById (theElement).style.color = "#FF0000";

Questo codice prima ottiene un riferimento all'elemento mediante il relativo valore di attributo ID passato. Una volta che ha un riferimento all'elemento, la funzione può applicare le modifiche ad esso. In questo caso, semplicemente cambia il colore del testo del contenuto dell'elemento. Molte funzioni di "onmouseover" alterano stile dell'elemento, ma alcuni anche alterare il contenuto di un elemento.

Funzioni associate

Molte pagine Web in cui viene fornita una funzione di "onmouseover" implementare anche la funzione di "onmouseout". Questo consente allo sviluppatore di ripristinare l'elemento HTML al suo stato originale quando l'utente sposta il mouse fuori di esso. Di seguito viene illustrato il seguente codice HTML alterato:
< div id = "contentElem" onmouseover="onElement(this.id)" onmouseout="offElement(this.id)" > qui è il contenuto dell'elemento < / div >

La seguente funzione JavaScript aggiuntiva funziona in congiunzione con questo:
Function offElement(theElement) () {
Document. getElementById (theElement).style.color = "#000000";
}

Questo può essere utile se l'elemento ha avuto originalmente testo nero. Se la funzione di "onmouseover" alterato contenuto dell'elemento, si potrebbe ripristinare il contenuto originale qui.