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".
 

Cambiare lo sfondo con un click

Dynamic Html
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

Molti grossi portali (quei siti che fungono da porte d'ingresso alla rete) hanno avviato una politica di personalizzazione. In parole povere, qualunque visitatore può modificare il layout del sito, lo sfondo, il testo e quant'altro.
Nel nostro piccolo, anche i Web masters meno rinomati possono permettersi tali sfiziosità tramite piccoli accorgimenti in Html dinamico.
La demo che vedremo questa settimana, riguarda proprio il cambio del colore di sfondo del documento tramite dei semplici click del mouse. L'esempio, creato dai due Web masters di Risorse.net, Roberto e Alessandro Abbate, contiene un solo Javascript e poche righe di testo, proprio per aumentare al massimo la facilità di consultazione:

<html>
<head>
<title>Demo dhtml - www.risorse.net</title>

<!--------- Script creato da ROBERTO e ALESSANDRO ABBATE ------------->
<!----------- Visita Risorse.net per avere altre demo ---------------->
<!-------------------- http://www.risorse.net ------------------------>
<!------ Esempio gratuito, ma non modificare questo commento --------->


</head>


<body bgcolor=gray link="white" alink="white" vlink="white">

Dopo i dovuti commenti dedicati agli autori, si giunge all'impostazione del tag body. È importante sottolineare che il colore di sfondo è consigliabile impostarlo sul grigio (gray) in modo tale da nascondere quei pochi pixel che rimangono scoperti dal layer a grandezza 100%. Infatti, la demo, non cambia effettivamente il colore di sfondo, il quale rimarrà sempre grigio, ma cambierà il colore del layer, impostato a grandezza/altezza 100%. La peculiarità della demo, verrà comunque meglio compresa nel proseguio dello script.

<layer id="sfondo" left="-2" top="-2" width="100%" height="100%" bgcolor="red">

Questa piccola parte del documento, è fondamentale per l'esecuzione dell'esempio. È qui infatti che viene inserito il layer grande quanto il documento ( width="100%" height="100%" ) qualunque risoluzione si imposti. L'accorgimento del 100%, serve infatti a ridimensionare il layer in caso di risoluzioni pari a 640x480 o 1024x768, discostandosi quindi dalla risoluzione più usata.

<script>
<!--
function cambiacolayer(newcol) { bgColor=newcol; return false; }
// -->
</script>

<br><br>

<a href="#" onclick='cambiacolayer("blue")'>Sfondo blu</a>
<br><br>
<a href="#" onclick='cambiacolayer("green")'>Sfondo verde</a>
<br><br>
<a href="#" onclick='cambiacolayer("red")'>Sfondo rosso</a>
<br><br>
<a href="#" onclick='cambiacolayer("black")'>Sfondo nero</a>

</layer>

</body></html>

In questa porzione di codice, è contenuto lo script che gestisce il cambio del colore del layer e i link che richiamano proprio questa funzione. Naturalmente, potete impostare un quasiasi altro colore al posto di quelli da noi inseriti, cambiando, ad esempio, la riga

<a href="#" onclick='cambiacolayer("black")'>Sfondo nero</a>

in

<a href="#" onMouseOver='cambiacolayer("yellow")'>Sfondo giallo</a>

per far si che il colore di sfondo (che, in questa demo è quello del layer) diventi giallo una volta che il mouse sfiori il link. Al posto della parola yellow, potete inserire anche valori esadecimali (per esempio #FFFF00).

Il gestore degli eventi utilizzato, è onmouseover, ma ciò non vieta l'uso di altri come onmouseout (quando il mouse si sposta dall'area del link), onmousedown (quando il tasto del mouse viene tenuto premuto. Poi, una volta che si lascia il tasto, diventa l'evento onmouseup), o altri ancora. A voi la scelta.

Clicca qui per vedere il risultato finale (solo con Netscape)

 

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