|
Modificare
dinamicamente il background
La
creazione di un documento per il Web è il risultato di una scelta
progettuale coerente. L’impostazione del layout di pagina e la
conseguente creazione dei documenti successivi, deve seguire una linea
grafica e cromatica omogenea. In questo contesto la scelta di un colore di
sfondo per il documento è di fondamentale importanza. Un colore di sfondo
scuro rispetto ad uno chiaro caraterizza decisamente un documento e il
messaggio che si vuole comunicare al visitatore. Non è questa la sede per
affrontare i criteri di scelta cromatica che dipendono da scelte personali
e senso estetico; ma lo è certamente per trattare di tutti quegli
accorgimenti che HTML dinamico mette a disposizione degli sviluppatori.
Generare eventi al’interno di un documento già completamente caricato
dal browser è una delle prerogative principali di HTML dinamico. Nel caso
specifico è possibile modificare il colore di background impostato col
classico comando:
<BODY BGCOLOR="white">
In altre parole si accede al documento avente un colore di sfondo
impostato dal tag BODY (in questo caso bianco), che attraverso una scelta
operata dal visitatore può essere modificato e ancora riportato
all’aspetto originale. Il tutto avviene in modo semplice ed intuitivo
attraverso una tavolozza di colori. Oltre all’opzione principale di
cambiamento del dello sfondo, la demo che segue prevede anche effetti sul
colore del testo presente nel documento.
Innanzitutto è necessario impostare il foglio di stile che crea la
tavolozza attraverso la quale si scelgono altri colori. Si tratta di una
serie di tabelle colorate che sapientemente impostate creano un effetto
molto simile alle classiche "color palette" dei comuni programmi
di fotoritocco:
I campi TABLE e TD impostano la larghezza, l’altezza e il tipo di
cursore delle tabelle, mentre H1 è il marcatore per la formattazione del
testo.
Impostato il foglio di stile si agisce all’interno dei tag BODY,
inserendo il codice, omesso in questa sede ma integralmente presente negli
esempi del cd-rom allegato alla rivista. Tale codice è aperto dalla
seguente riga:
<DIV ONCLICK="colorSelector()">
Il gestore di eventi ONCLICK prevede che la funzione "ColorSelector()"
venga richiamata quando il puntatore del mouse clicca su un colore della
tavolozza. Quindi, perché lo sfondo cambi è necessario che l’utente
clicchi sul colore. E’ possibile sostituire ONCLICK con due differenti
gestori di eventi: ONMOUSEOUT e ONMOUSEOVER.
Il primo dei due prevede che lo sfondo cambi quando il puntatore del mouse
esce dall’area di link dopo esservi entrato. Il secondo, invece,
modifica il colore di sfondo quando il puntatore del mouse entra
nell’area di link.
Finora
si è esaminato il cambiamento del colore del background, ma non il
cambiamento dinamico di un’immagine di sfondo. Nel Web attuale la
stragrande maggioranza dei documenti richiama uno sfondo d’immagine in
GIF o JPG attraverso il comando:
<BODY BACKGROUND="nome_immagine.jpg">
Nell’esempio visto in precedenza non è contemplata questa possibilità,
nel senso che in presenza di uno sfondo d’immagine preesistente, gli
effetti della demo non si producono.
Il secondo esempio di questo articolo è volto a spiegare come HTML
dinamico permetta di modificare anche un’immagine di background non
limitandosi al solo colore. Il funzionamento è molto simile al
precedente, con la prima evidente differenza che vede delle immagini GIF e
JPG sostituite alla tavolozza di colori vista in precedenza.
All’interno dei tag BODY va inserito il codice che imposta la funzione
"tile()":
Visualizza
l'esempio pratico
Nel corpo del documento va, poi, inserito il riferimento alla funzione
"tile()" e le immagini che vanno a costituire lo sfondo del
documento, e sulle quali il visitatore deve cliccare:
Anche in questo caso, come nel precedente, il gestore di eventi onClick può
essere sostituito da onMouseOver e OnMouseOut.
Sulla falsariga di questo codice è possibile impostare un documento che
carichi una differente immagine di sfondo ad ogni apertura di pagina.
Questo il codice da inserire tra i tag HEAD del documento:
Visualizza
l'esempio pratico
Questo codice oltre ad impostare l’immagine di sfondo, stabilisce altre
caratteristiche del testo attraverso "document.write".
Fonte:
Html.it |
