January 25
Utilizzando codice HTML e JavaScript, gli sviluppatori possono creare effetti interattivi sulle pagine web. Gli elementi HTML per una pagina possono includere gli attributi del listener di eventi in grado di rilevare l'interazione dell'utente con il mouse, come lo spostamento sopra un elemento particolare. Quando si verifica un 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 il mouse dell'utente è in bilico su di esso.
La funzione "onmouseover" è abilitato quando gli utenti passare con il mouse sopra un elemento HTML. Il seguente codice di esempio markup dimostra:
<Div id = "contentElem" onmouseover = "onElement (this.id)"> Ecco il contenuto dell'elemento </ div>
Questo indica al browser Web dell'utente per tenere traccia l'utente spostando il mouse sopra l'elemento. Quando questo accade, il browser esegue la funzione JavaScript specificato, passando il valore dell'attributo ID dell'elemento come parametro. Questo permette la funzione di identificare l'elemento all'interno della pagina nel suo complesso, in modo che possa attuare un effetto visivo.
La funzione JavaScript specificato come attributo elemento evento HTML possono essere inclusi nella sezione head della pagina Web o in uno script separato. Il codice di esempio riportato di seguito illustra lo schema funzione all'interno della testa pagina:
<Head>
<Script type = "text / javascript">
Funzione onElement (theElement) {
// Implementazione funzione
}
</ Script>
</ Head>
Per fare riferimento a una funzione in un file di script separato, può essere visualizzato il seguente codice, anche nella sezione head:
<Script type = "text / javascript" src = "myfunctioncode.js"> </ script>
In questo caso, lo script si trova nella stessa directory della pagina Web. All'interno dello script, il contorno funzione può essere inclusa direttamente, come segue:
Funzione onElement (theElement) {
// Implementazione funzione
}
Il contenuto di una funzione "onmouseover" dipenderà naturalmente dal suo scopo. Il codice di esempio riportato di seguito illustra una possibile implementazione:
document.getElementById (theElement) .style.color = "# ff0000";
Questo codice prima guadagna un riferimento all'elemento utilizzando il suo valore di attributo ID passato. Una volta che ha un riferimento all'elemento, la funzione può applicare modifiche. In questo caso, semplicemente cambia il colore del testo del contenuto dell'elemento. Molti "onmouseover" funzioni alterano stile elemento, ma alcuni anche alterare il contenuto di un elemento.
Molte pagine web in cui una funzione di "onmouseover" viene fornito anche implementare la funzione "onmouseout". Questo consente allo sviluppatore di ripristinare l'elemento HTML al suo stato originale quando l'utente sposta il mouse fuori di esso. Il seguente codice HTML alterato dimostra:
<Div id = "contentElem" onmouseover = "onElement (this.id)" onmouseout = "offElement (this.id)"> Ecco il contenuto dell'elemento </ div>
La seguente funzione aggiuntiva JavaScript funziona in congiunzione con questo:
Funzione offElement (theElement) {
document.getElementById (theElement) .style.color = "# 000000";
}
Questo può essere utile se l'elemento originariamente aveva testo nero. Se il contenuto funzione "onmouseover" alterato elemento, si potrebbe ripristinare il contenuto originale qui.