JavaScript consente a un sito Web per rispondere agli eventi utente, modificare il contenuto di una pagina basata su varie azioni di mouse e tasti. Menu e pulsanti servono spesso come trigger per tali modifiche, ma div può essere altrettanto sensibile. Un DIV è un tag HTML che funge da contenitore per altri contenuti, come testo e foto. Mouse su qualsiasi parte del DIV può innescare un cambiamento. Spostando il mouse fuori il DIV può innescare un altro.
Istruzioni
1
Inserire una funzione di supporto tra la testa tag che consente lo script funziona su tutti i browser. La funzione aggiungere listener di eventi agli elementi HTML nella pagina. Quando viene chiamato, l'helper funzione prende tre argomenti o insiemi di istruzioni: l'elemento di destinazione, il tipo di evento e la funzione da chiamare.
Function addEvent (obj, type, fn) {
Se (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener(type, fn, false);
}
2
Creare una funzione tra i tag head che utilizza l'evento load, o il caricamento della pagina nella finestra, chiamare la funzione di "testMouse". Questo verrà collegato due listener di eventi per il vostro DIV:
Window.OnLoad=testMouse;
3
Creare funzioni che si tradurrà nel colore del vostro DIV cambiando pagina basato sugli eventi mouseover e mouseout. Iniziare con la creazione di "testMouse", che otterrà il DIV dal relativo ID di "testDiv." Ascoltare gli eventi mouseover e mouseout e chiamare le funzioni di "addColor" o "removeColor", rispettivamente. Creare le funzioni di "addColor" e "removeColor" che cambiano il colore di sfondo.
Function testMouse() () {
var divField=document.getElementById("testDiv");
addEvent(divField, 'mouseover', addColor);
addEvent(divField, 'mouseout', removeColor);
}
Function addColor() () {
var divField=document.getElementById("testDiv");
divField.style.backgroundColor="#CCC";
}
Function removeColor() () {
var divField=document.getElementById("testDiv");
divField.style.backgroundColor="";
}4
Inserire il tag DIV e il testo di esempio tra i tag body del documento:
< div id = "testDiv" >
< p > testo qui testo qui testo qui. </p >
< / div >
5
Stili CSS di posto per il vostro DIV tra i tag di testa per renderlo una dimensione fissa e dargli una priorità bassa blu:
< style type = "text/css" >
testDiv {width: 200px; altezza: 50px; background-color: #6699CC; padding: 5px 5px 5px 10px;}
< / stile >
6
Salvare la pagina e aprirlo in un browser per testare il codice. Mouse sopra il vostro DIV dovrebbe trasformarlo da blu a grigio. Spostando il mouse fuori il DIV dovrebbe riportare in grigio.
Il codice completo dovrebbe assomigliare a questo:
< html >
< head >
< style type = "text/css" >
testDiv {width: 200px; altezza: 50px; background-color: #6699CC; padding: 5px 5px 5px 10px;}
< / stile >
< script type = "text/javascript" >
Function addEvent (obj, type, fn) {
Se (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener(type, fn, false);
}
Window.OnLoad=testMouse;
Function testMouse() () {
var divField=document.getElementById("testDiv");
addEvent(divField, 'mouseover', addColor);
addEvent(divField, 'mouseout', removeColor);
}
Function addColor() () {
var divField=document.getElementById("testDiv");
divField.style.backgroundColor="#CCC";
}
Function removeColor() () {
var divField=document.getElementById("testDiv");
divField.style.backgroundColor="";
}
< / script >
< / head >
< corpo >
< div id = "testDiv" >
< p > testo qui testo qui testo qui. </p >
< / div >
< / body >
< / html >