Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Semplice rollover sui bottoni grigi dei form

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Questa settimana vedremo un semplicissimo esempio di animazione sui classici bottoni grigi dei form. I Css (www.risorse.net/css) e Javascript (www.risorse.net/javascript) permettono, con poche righe di codice, di creare un buon effetto, purtroppo visualizzabile solo con Microsoft Internet Explorer.
Vediamo quindi di inserire il foglio di stile per impostare il tipo di animazione:

<STYLE TYPE="text/css">
.over {color:yellow; background:navy}
.down {color:yellow; background:navy; font-style:italic}
</STYLE>

.over e .down sono le classi che verranno richiamate in seguito tramite alcuni gestori degli eventi.
Tra le parentesi graffe vengono definiti gli stili del bottone. Quando il mouse si troverà sopra il pulsante, esso sarà di colore blu con testo giallo, mentre quando ci si cliccherà sopra, il pulsante verrà inclinato verso destra grazie allo stile italic (corsivo).

Queste animazioni vengono richiamate tramite i gestori degli eventi:
onmouseover: si scatena quando il cursore passa sopra l'oggetto.
onmouseout: il puntatore si allontana dalla zona dell'elemento.
onmousedown: si clicca sopra l'oggetto.
onmouseup: viene rilasciato il tasto del mouse.

<INPUT TYPE=BUTTON VALUE="Clicca qui" ONMOUSEOVER="this.className = 'over';" ONMOUSEOUT="this.className = '';" ONMOUSEDOWN="this.className = 'down';" ONMOUSEUP="this.className = 'over';">

Al momento di un nostro click, si può sostituire l'effetto di inclinazione del bottone con un tasto più grande, per esempio cambiando all'interno del Css la riga:

.down {color:yellow; background:navy; font-style:italic}

con

.down {color:yellow; background:navy; font-weight:bold}

Ecco che abbiamo creato una semplice animazione utilizzando solamente un foglio di stile e quattro gestori di eventi.
 

 
 
Home > dhtml > teoria > 2000 > febbraio > ...   © 1999-2017 Risorse.net, tutti i diritti riservati