March 5
Attraverso una combinazione di markup HTML, dichiarazioni Cascading Style Sheet e il codice JavaScript, le pagine Web possono implementare effetti interattivi, alterare l'aspetto di elementi come l'utente sposta il mouse in giro e si libra sopra elementi specifici. Gli sviluppatori possono aggiungere effetti interattivi per tutti gli elementi HTML utilizzando attributi di eventi, o per ancorare elementi utilizzando selettori CSS. Gli attributi possono indicare al browser Web per rilevare l'utente in movimento suo mouse o disattivare un particolare elemento, alterando elemento aspetto quando questo accade.
Le pagine Web possono includere effetti al passaggio del mouse su qualsiasi elemento HTML. Ogni elemento HTML è costituito apertura e chiusura tag, alcuni contenuti tra loro e attributi opzionalmente. Il seguente codice HTML di esempio dimostra un elemento tipico:
<Div id = "intelem"> Sposta il mouse questo testo </ div>
Questo elemento ha qualche semplice il contenuto del testo e un attributo ID. L'attributo ID deve apparire solo una volta all'interno di una singola pagina, in quanto questo attributo è per l'identificazione elemento unico. La funzione hover JavaScript può utilizzare l'attributo ID per modificare l'aspetto dell'elemento. effetti al passaggio del mouse possono anche applicare per ancorare gli elementi utilizzando il codice CSS. Il seguente codice dimostra un ancoraggio HTML:
<a href="page.html"> A Page </a>
elementi HTML possono includere vari attributi di evento. Poiché l'effetto hover si verifica quando gli utenti passare con il mouse su un elemento, gli elementi HTML devono rilevare gli eventi del mouse. I "onmouseover" e gli eventi "onMouseOut" rilevano l'utente a rotazione con il mouse e lo spegnimento di un elemento. Il seguente codice di esempio esteso dimostra l'aggiunta di questi due eventi attributi all'elemento:
<Div id = "intelem" onmouseover = "onElem (this.id)" onmouseout = "offElem (this.id)"> Sposta il mouse questo testo </ div>
Questo codice indica al browser Web per rilevare l'utente rotolare il mouse o disattivare l'elemento, chiamando le funzioni JavaScript specificate quando ciò si verifica. Ogni chiamata funzione passa l'ID elemento come parametro, quindi il codice JavaScript potrà identificare l'elemento all'interno della pagina.
Le pagine Web implementano effetti interattivi utilizzando il codice JavaScript. Questo codice può essere inserito all'interno di file JavaScript salvati con ".js" estensione, legati alla sezione head pagina HTML come segue:
<Script type = "text / javascript" src = "pagefunctions.js"> </ script>
Questo permette di accedere a tutte le funzioni elencate in un file denominato "pagefunctions.js", che viene salvato nella stessa directory della pagina. In alternativa, gli sviluppatori possono includere il codice JavaScript direttamente nella sezione head della pagina nel modo seguente:
<Script type = "text / javascript">
// funzioni qui
</ Script>
Questa sezione può contenere le funzioni JavaScript per implementare l'effetto hover.
funzioni JavaScript per implementare effetti hover prima identificare gli elementi in fase di interagito con. La seguente funzione delinea rappresentare i due attributi evento chiamato quando il mouse si muove dentro e fuori di un elemento:
Funzione onElem (elemID) {
// Implementazione funzione qui
}
Funzione offElem (elemID) {
// Implementazione funzione qui
}
All'interno di questi corpi di funzione, gli sviluppatori possono implementare l'effetto hover. Il codice seguente ottiene un riferimento all'elemento chiamando il metodo:
var theElem = document.getElementById (elemID);
La funzione può quindi applicare proprietà styling all'elemento, come segue:
theElem.style.color = "# ff0000";
La funzione chiamata quando l'utente sposta il mouse fuori l'elemento potrebbe riportarla al suo aspetto visivo originale. Ogni volta che queste funzioni vengono eseguite, possono utilizzare il parametro ID passato per individuare l'elemento corretto e alterare il suo aspetto, se necessario.
Le dichiarazioni CSS per un sito possono stile elementi di ancoraggio. CSS può specificare particolari impostazioni di aspetto per quando l'utente passa il mouse su un ancoraggio. La seguente dichiarazione CSS dimostra l'impostazione della comparsa di ancoraggi pagina su hover:
a: hover {color: # 333333;}
Questa sezione può includere altre dichiarazioni CSS a dettare lo stile di contenuti di ancoraggio. Il codice CSS può anche opzionalmente specificare le impostazioni per l'elemento di ancoraggio nel suo stato normale, come un collegamento HTML e per i collegamenti l'utente ha già visitato.