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)
