Home| Progetto| Web| Faq| Acronimi | ||||
Argomenti Documenti pubblicabili:1120
Scripts:1282 Documenti non pubblicabili:162 Categorie tematiche:68 .Net |_C# |_Visual basic.net |_Asp.net Active Server Pages C++ Cascade Style Sheet JavaScript Mysql Php Xml Java |_Java 2 Micro Edition |_Java server pages |_Java Servlet Oracle |_PLSQL PostgreSQL Unix
Oracle...
Script:
Conditional update
Unix...
Tip:
Rimuovere un file in Unix / Delete a file
PLSQL...
Script:
TYPE TABLE
JavaScript...
Tip:
Target blank per una finestra di pop up
JavaScript...
Faq:
Is it possible to access a database?
Shell scripting...
Script:
Debug shell program
La rabbia è creativa, la depressione è senza utilità
Dyson, Freeman J.
Php Funzione mail()
Charles Babbage(1791-1871) nel 1823 ottenne dal governo 100 Sterline per la costruzione del calcolatore Different Engine.
La rabbia è creativa, la depressione è senza utilità
Dyson, Freeman J.
|
JavaScript
Home >JavaScript > Effetti dinamici con Css e Javascript
Mouse Here
ObiettivoQuesto 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. PrerequisitiPer questo tutorial è utile la conoscenza anche solo superficiale di Javascript e dei fogli di stili Css.Definire i DivPer questo esempio sono necessari 5 div che saranno definiti da 5 relative classi nel foglio di stile Css.Ad esempio il square0 è così definito:
div.square0 {
width:50px; height:50px; background: #000; border: 1px solid #190581; position: absolute; top: 150px; left: 100px; visibility:hidden; } 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:
(...)
color:#FFF; text-align:center; font-size: small; font-family: verdana, arial, serif; font-weight: bold; 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:
<div class= "square0" id="Div1"></div>
<div class= "square1" id="square0"></div> <div class= "square2" id="square0"></div> <div class= "square3" id="square0"></div> <div class= "squareRun" onmouseover="showSquare()" onmouseout="hideSquare()" id="squareRun"> Run </div> 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:
setTimeout("document.getElementById('square0').style.visibility='visible'",1000);
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]
Marco Magnani marcomagnani@fishscript.com
|
CercaIl web è un giovane media: infatti ha solo 10 anni di età.
Si pensi alla televisione o al cinema all'età di 10 anni. A quei tempi questi media erano primitivi, ancora alla ricerca della loro strada.
Venivano esplorati i limiti della nuova tecnologia, ma grandi progressi dovevano ancora essere raggiunti.
Oggi, i professionisti del web si trovano nella stessa fase. Sono pionieri che stanno ancora esplorando i limiti del nuovo media. Senza dubbio, i nostri nipoti, quando vedranno quello che abbiamo fatto pensaranno a qualcosa di elementare.
C'è ancora molto da scopire su quello che il Web può fare e suo come può essere utilizzato.
Jason Foss
Il web è un giovane media: infatti ha solo 10 anni di età.
Si pensi alla televisione o al cinema all'età di 10 anni. A quei tempi questi media erano primitivi, ancora alla ricerca della loro strada.
Venivano esplorati i limiti della nuova tecnologia, ma grandi progressi dovevano ancora essere raggiunti.
Oggi, i professionisti del web si trovano nella stessa fase. Sono pionieri che stanno ancora esplorando i limiti del nuovo media. Senza dubbio, i nostri nipoti, quando vedranno quello che abbiamo fatto pensaranno a qualcosa di elementare.
C'è ancora molto da scopire su quello che il Web può fare e suo come può essere utilizzato.
Jason Foss
Oracle...
Definizioni:
Transazione
Shell scripting...
Script:
while do loop
fishScript.Com is accessible by Mobile access technology
as mobile phones, Palm and Pocket PC .
Nicoleta e Marco Magnani tutorial, examples, courses, esempi, corsi, esercizi, appunti vari Dottoressa Nicoleta Dragu Formatrice Docente Insegnante Mediatrice Culturale Dott. Marco Magnani Universita La Sapienza Roma Master Computer Science Hunter College New York , Data Base Administrator DBA oracle System architect |