Massimiliano Valente (mvalente@tecnet.it)

Effetti sul background

Lo sfondo Φ uno degli elementi pi∙ importanti di un documento Web. DHTML consente di modificarne dinamicamente il colore e le eventuali immagini. Sfruttando le proprietα di Javascript e dei CSS Φ anche possibile generare visualizzazioni slide all’apertura del documento

La creazione di un documento per il Web dovrebbe essere il risultato di una scelta progettuale coerente e il layout di pagina seguire una linea grafica e cromatica omogenea. In questo contesto anche la scelta di uno sfondo adeguato Φ di fondamentale importanza.
Fra le altre cose Dynamic HTML consente di gestire effetti speciali sul background, altrimenti impossibili con i normali comandi di HTML. I principali sono:

╖ cambiamento dinamico del background del documento giα completamente caricato;
╖ effetto grafico sul background all’entrata o all’uscita da una pagina
Modificare il colore di sfondo
Generare eventi all’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 con il classico comando

<BODY BGCOLOR="white">

In altre parole, il visitatore che accede alle pagine che offrono questa funzionalitα Φ grado di modificare a proprio piacimento il colore dello sfondo impostato dal tag BODY (in questo caso bianco). Il tutto avviene in modo semplice e intuitivo. Oltre all’opzione principale di cambiamento dello sfondo, la demo che segue prevede effetti anche sul colore del testo.
Per prima cosa sarα necessario impostare il foglio di stile che crea le tavolozze dei colori, tabelle colorate in grado di creare un effetto molto simile alle classiche color palette dei comuni programmi di fotoritocco

<STYLE TYPE="text/css">
TABLE {background:white}
TD {width:20pt; height:20pt; cursor:default}
H1 {font-size:20; font-family:arial}
</STYLE>

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. ╚ possibile sostituire ONCLICK con due differenti gestori di eventi: ONMOUSEOUT e ONMOUSEOVER.
Il primo dei due fa cambiare lo sfondo quando il puntatore del mouse esce dall’area di link dopo esservi entrato. Il secondo, invece, modifica il colore quando il puntatore entra nell’area.
╚ possibile modificare sfondo e testo della pagina, cliccando nelle celle colorate
Abbiamo finora esaminato il cambiamento del colore di background, ma non il cambiamento dinamico di un’immagine di sfondo (in GIF o JPG) presente in molti siti e rintracciabile dalla riga di codice

<BODY BACKGROUND="nome_immagine.jpg">

Nell’esempio visto in precedenza la presenza di uno sfondo rappresentato da un’immagine preesistente, fa s∞ che gli effetti della demo non si producano. Analizzeremo quindi con un altro esempio questa eventualitα.

Quando il background Φ un’immagine

Il secondo esempio di questo articolo Φ volto a spiegare come HTML dinamico permetta di modificare anche un’immagine (e non solo il colore) di background. Il funzionamento Φ molto simile al precedente, con la differenza che alla tavolozza di colori vista prima si sostituiscono immagini GIF e JPG.
All’interno dei tag BODY va inserito il codice che imposta la funzione tile()

<script language="JavaScript1.2">

</script>

Nel corpo del documento va poi inserito il riferimento alla funzione tile() e le immagini che vanno a costituire lo sfondo del documento sulle quali si dovrα cliccare

<div class="bgimages" onClick="tile()" STYLE="position:absolute; top:150px; left:150px">
<img src="sfondo01.jpg" width=100 height=100 alt="Background 1">
<img src="sfondo02.gif" width=100 height=100 alt="Background 2" hspace=10>
<img src="sfondo03.jpg" width=100 height=100 alt="Background 3">
<img src="sfondo04.jpg" width=100 height=100 alt="Background 4" hspace=10>
</div>

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 capace di caricare una differente immagine di sfondo a ogni apertura di pagina. Questo il codice da inserire tra i tag HEAD del documento

<script language="JavaScript">
var backgr1="sfondo01.jpg"
var backgr2="sfondo02.gif"
var backgr3="sfondo03.jpg"
var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<body background="'+backgr+'" bgcolor="white" text="black" link="blue" vlink="blue" alink="red">')
</script>

-che, oltre a impostare l’immagine di sfondo, stabilisce altre caratteristiche del testo attraverso il metodo document.write.

Effetti speciali in entrata

Finora sono stati esaminati esempi nei quali gli effetti si producono quando il documento Φ completamente caricato dal browser. Una delle altre peculiaritα implementate nella versione 4 di Microsoft Internet Explorer Φ la possibilitα di generare, attraverso semplici meta tag del tipo

<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=2)">

vari effetti vari di visualizzazione sia in entrata sia in uscita da un documento. Si tratta di una tecnologia compatibile esclusivamente con il browser Microsoft e non con Netscape. Se si vuole ottenere un effetto simile con entrambi i browser, occorre fare ricorso ad alcuni espedienti tecnici che prendono a prestito codice di solito destinato ad altri effetti. Nella fattispecie si tratta di un uso congiunto di fogli di stile e codice Javascript, attraverso il quale vengono create visualizzazioni progressive della pagina con cinque differenti effetti:

╖ righe multiple verticali
╖ righe multiple orizzontali
╖ 2 righe verticali
╖ 2 righe orizzontali
╖ visualizzazione progressiva

Il codice necessario a generare questi effetti Φ comune a tutti gli esempi e si distingue solo per i valori d'impostazione.
Prima di tutto va impostato il foglio di stile all’interno dei tag BODY

<style>

</style>

La proprietα layer-background-color:yellow stabilisce il colore per la visualizzazione progressiva con Netscape, mentre background-color: yellow sortisce lo stesso effetto con MSIE. In altre parole all’atto dell’apertura della pagina lo sfondo appare completamente giallo, per lasciare progressivamente spazio al contenuto vero e proprio del documento. Per impostare un colore di sfondo differente dal giallo Φ sufficiente sostituire il valore ½yellow╗ con altro colore o in alternativa con un valore esadecimale (es: #FFFF00).
L’impostazione del foglio di stile, fatto salvo il colore di sfondo, Φ identica per tutti gli esempi. In gran parte anche l’impostazione successiva del codice Javascript non varia dall’uno all’altro. Questo, il codice da inserire nel corpo del documento

<script language="JavaScript1.2">

var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=2;i++){
    temp[i]=eval("document.i"+i+".clip")
    temp2[i]=eval("document.i"+i)
    temp[i].width=window.innerWidth/2
    temp[i].height=window.innerHeight
    temp2[i].left=(i-1)temp[i].width
}
}
else if (document.all){
var clipright=document.body.clientWidth/2,clipleft=0
for (i=1;i<=2;i++){
    temp[i]=eval("document.all.i"+i+".style")
    temp[i].width=document.body.clientWidth/2
    temp[i].height=document.body.offsetHeight
    temp[i].left=(i-1)parseInt(temp[i].width)
}
}

function openit(){
window.scrollTo(0,0)
if (document.layers){
    temp[1].right-=speed
    temp[2].left+=speed
    if (temp[2].left>window.innerWidth/2)
      clearInterval(stopit)
}
else if (document.all){
clipright-=speed
temp[1].clip="rect(0 "+clipright+" auto 0)"
clipleft+=speed
temp[2].clip="rect(0 auto auto "+clipleft+")"
if (clipright<=0)
    clearInterval(stopit)
}
}

function gogo(){
stopit=setInterval("openit()",100)
}
gogo()

</script>

La velocitα di visualizzazione Φ regolata dalla riga

var speed=20

A valori pi∙ alti corrispondono aumenti della velocitα.

L’oggetto all rappresenta l'insieme di tutti gli elementi del documento ed Φ accessibile solo a Internet Explorer. Nel Document Object Model (DOM) previsto da Netscape gli eventi sono limitati a specifici oggetti, in questo esempio rappresentati dai layer. Questa differente interpretazione del DOM da parte di MSIE e Netscape giustifica la presenza di distinto codice

if (document.layers)

per l’accesso agli oggetti di Netscape. E anche

else if (document.all)

per l’accesso a tutti gli oggetti del documento di Internet Explorer.
In altre parole il browser Microsoft ha accesso a ogni elemento, compresi colore, sfondo, font.
Concludendo l’analisi del codice, Φ necessario inserire le seguenti righe che richiamano le funzioni impostate in precedenza:

<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>

L’esempio finora considerato genera una visualizzazione progressiva in senso orizzontale. Per ottenere risultati differenti, modificando la direzione, il numero e la grandezza degli slide Φ necessario agire volta per volta sui valori dello script. Nel CD-ROM allegato alla rivista sono presenti quattro esempi pratici.

Internet News Φ un mensile della Casa Editrice Tecniche Nuove S.p.A.
⌐ 1995/99. Tutti i diritti sono riservati.
Internet News non risponde di eventuali errori e omissioni.
Commenti a: inews@tecnet.it