fishScript.com d
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



PLSQL... Script: TYPE TABLE

Shell scripting... Script: Debug shell program

La rabbia è creativa, la depressione è senza utilità Dyson, Freeman J.



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

Stampa  Stampa


Mouse Here











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:

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] 

signal Marco Magnani marcomagnani@fishscript.com



Cerca





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


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

Last modified: 2017-11-30 amministratore@fishscript.comNico and Marco Magnani Software Production
Home|About this Site © 2003-2008 www.fishScript.com ®