Home >JavaScript > Effetti dinamici con Css e Javascript

Obiettivo

Questo documento prende in esame alcune tecniche di iterazione tra codice javascript e stili css, per illustrare le potenzialità di dinamismo e di interazione con l'utente delle pagine web. Il codice riportato è supportato sia da da browser Microsoft Explorer (Provato con vers. 5 e superiori) che da browser Mozilla Firefox(Provato con vers. 0.9 e superiori).
Inoltre il documento è di tipo XHTML 1.0 Transitional e conforme alle direttive W3C.
Il codice sorgente e l'output di questo esempio è disponibile nel file effettidinamici.html, usando l'opzione Salva oggetto con nome si può scaricare il file nel proprio computer e prendere in esame il codice.

Prerequisiti

Per questo tutorial è utile la conoscenza anche solo superficiale di Javascript e dei fogli di stili Css.

Definire i Div

Per questo esempio sono necessari 5 div che saranno definiti da 5 relative classi nel foglio di stile Css.
Ad esempio il square0 è così definito:



La proprietà e relativo valore postion:absolute indica al browser che il blocco deve essere visualizzato nelle coordinate specificate, rispetto al contenitore padre. Le coordinate sono specificate da top e left che si riferiscono rispettivamente alla distanza in pixel dalla parte superiore e da quella sinistra della pagina.
Le proprietà width e height con i loro valori stabiliscono le dimensioni del div in larghezza e altezza.
La classe squareRun rappresenta, come si illustra più avanti, un'area sensibile che scatena gli eventi, contenente anche le proprietà che definiscono lo stile del testo contenuto nel div:



Definite le altre classi per i div, con coordinate width e height che li dispongano a croce, all'interno del Body del documento xhtml occorre creare i relativi div e applicarvi le classi di stile appena create:



L'ultimo div, con id squareRun, è definito dalla relativa classe: dimensioni 50x50 pixel posizionato a 200 pixel dal margine superiore della pagina e da 100 rispetto a quello sinistro, è un elemento sensibile a a due eventi:

quando il puntatore del mouse è sopra la superficie del div (onmouseover) aziona la funzione showSquare;

quando il puntatore del esce dalla superficie del div(onmouseout) aziona la funzione hideSquare.

Nel codice Javascript l'istruzione centrale della funzione showSquare() è rappresentata dalla seguente riga:



L'istruzione setTimeout esegue:

document.getElementById('square0').style.visibility='visible'"

che identificando gli elementi atraverso il loro id stabilisce il tempo di attesa rispetto al tempo in cui è stato scatenato l'evento (onmouseover) in millesecondi (i quattro div vengono visualizzati a distanza di 100 millesecondi).

La funzione hideSquare scatenata dall'evento hideSquare semplicemente imposta la proprietà visibility a nuovamente nascosta (hidden).

---

---

Warning: include(ads/text468x15.html): failed to open stream: No such file or directory in D:\inetpub\webs\fishscriptcom\documents\view_document.php on line 131

Warning: include(): Failed opening 'ads/text468x15.html' for inclusion (include_path='.;C:\php\pear') in D:\inetpub\webs\fishscriptcom\documents\view_document.php on line 131

Tutorial
Effetti dinamici con Css e Javascript Nascondere e visualizzare elementi nella pagina   [JavaScript] 
Script
Semplice esempio con onchange e this.value Costrutti elementari per disegnare pagine dinamiche  [JavaScript] 
Demo charAt() Operazioni sulle stringhe. Acquisizione valori dai campi input della pagina.  [JavaScript] 
Calcolatrice on line Operatori matematici. Costrutto switch. Iterazione con glie lementi della pagina  [JavaScript] 
Eventi e bottoni radio Iterazioni con il client  [JavaScript] 
Inserimento e visualizzazione un'immagine Caricare e visualizzare un'immagine nella pagina e controllore che il file abbia una estensione ammessa  [JavaScript] 
Generare un numero casuale Funzioni matematiche  [JavaScript] 
Inclusione di un file con JavaScript Chiamare uno script contenuto in un altro file  [JavaScript] 
Leggere il valore selezionato in una combo Controllo della pagina e degli input del client.  [JavaScript] 
Metodo setTime Gestione eventi nella pagina  [JavaScript] 
Operazioni di sottrazione e somma Semplici calcoli matematici.  [JavaScript] 
Reset della pagina Elementi di controllo sulla pagina  [JavaScript] 
Stringhe: concatenazione e stampa Operazioni di base  [JavaScript] 
Controllo di eguaglianza di stringhe in due campi Controlli sui campi input  [JavaScript] 
Time Out ed eventi Dopo un determinato intervallo invia ad un'altra pagina  [JavaScript] 
Images preload and mouse over / out effect Manipolating events as mouse over/out and objects as images in the html context  [JavaScript] 

---

---