Cambiare lo sfondo con un click

Dynamic Html
di Risorse.net

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)

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/secondo.asp?print=ok