Posizioni d'effetto
Massimiliano Valente – mvalente@tecnet.it
Con la definizione della bozza Cascading Style Sheets-Positioning, si Φ aperta la
porta alla possibilitα di gestire in modo nuovo i contenuti ipertestuali di un documento
Web offrendo la possibilitα di creare effetti visivi molto interessanti. Analizziamola in
dettaglio attraverso semplici esempi d'immediata utilitα
Le proprietα dei fogli di stile (Cascading Style Sheets) permettono, grazie al modello
a oggetti, di manipolare dinamicamente la posizione degli elementi all'interno di una
pagina Web. I CSS sono stati introdotti nella versione 3.0 di MSIE e definitivamente
standardizzati dal W3C. Nel 1996 i rappresentanti di Microsoft e Netscape hanno raggiunto
un accordo che ha portato alla definizione della bozza denominata ½CSS-Positioning╗.
L'accordo ha reso compatibile il posizionamento dei CSS nelle versioni di Navigator 4.0 ed
Explorer 4.0, i quali, comunque, si differenziano per un diverso approccio al modello di
script.
Le potenzialitα intrinseche del modello CSS-P permettono di gestire in modo finora
inedito i contenuti di un documento ipertestuale, rendendo dinamico un sistema di
contrassegno statico quale Html.
Gli esempi esposti pi∙ avanti mostrano come modificare il contenuto testuale di una
pagina senza bisogno che venga ricaricata, ma attraverso l'uso di script associati alle
specifiche dei fogli di stile a cascata.
Esaminiamo, prima di tutto, il codice che gestisce la formattazione del contenuto del
documento, attraverso i fogli di stile. Questo codice Φ compreso tra i tag <HEAD> e
contiene informazioni fondamentali per il posizionamento degli elementi nella pagina:
<STYLE TYPE="text/css">
#layer1 {POSITION:absolute; Z-INDEX:10; VISIBILITY:visible; LEFT:180px;
TOP:70px; width:250px;}
#layer4 {POSITION:absolute; overflow:scroll; Z-INDEX:40; VISIBILITY:hidden; LEFT:180px;
TOP:70px; width:250px; height:220px; background-color:#FFFF80;
layer-background-color:#FFFF80;}
</STYLE>
Il posizionamento previsto dalla bozza di lavoro CSS-P si divide in: statico, relativo e
assoluto.
Il primo (position:static) non ha alcun effetto sulla formattazione del documento, che
viene gestita come se si trattasse di un normale ipertesto in Html statico.
Il posizionamento relativo (position:relative) si riferisce alle proprietα che l'elemento
assume rispetto agli altri oggetti presenti nel documento, attraverso le proprietα
½top╗ e ½left╗; quello assoluto fa riferimento alla distanza dal margine alto (top) e
sinistro (left) e pone gli elementi al di fuori del layout tradizionale Html. In altre
parole, la posizione dell'elemento non dipende dagli altri oggetti presenti nella pagina,
ma esclusivamente da valori assoluti. Questo tipo di posizionamento prevede l'uso di SPAM
o DIV che, come descriveremo, vanno inseriti in successione.
Absolute impedisce al browser di applicare i suoi algoritmi di posizionamento, quindi
anche se la finestra viene ridimensionata la posizione degli elementi non muta.
Z-INDEX definisce la posizione di un elemento nella pagina in relazione all'asse z. A
differenza degli assi x (che definiscono la posizione orizzontale da destra a sinistra) e
y (verticale dall'alto verso il basso), gli assi y si riferiscono alla terza dimensione,
cioΦ la profonditα che va da dietro a davanti. In questo modo Φ possibile gestire vari
strati con il risultato di ottenere una serie di fogli sovrapposti visualizzabili
singolarmente. Nel codice esaminato l'elemento ½Z-INDEX:10╗ Φ sovrapposto rispetto a
½Z-INDEX:20╗, seppure posizionato in modo assoluto nella stessa porzione di pagina
(LEFT:180px; TOP:70px;).
La proprietα ½visibility╗ determina quale layer debba essere visualizzato all'atto del
caricamento della pagina, e quali invece vadano nascosti e visualizzati solo al
verificarsi di determinati eventi. In questo esempio la proprietα del primo strato Φ
immediatamente visibile perchΘ impostata su ½visible╗, al contrario delle altre
impostate su ½hidden╗.
La proprietα ½overscroll╗ gestisce i contenuti che eccedono le dimensioni del layer.
Tale proprietα assume diversi valori: visible (visualizza tutto il contenuto), hidden
(solo i contenuti che rientrano nelle dimensioni del layer), auto (inserisce lo scroll
quando il contenuto eccede le dimensioni) e scroll (inserisce sempre lo scroll di pagina).
Colori di sfondo ed eventi
Le proprietα ½top, left, width e height╗ definiscono rispettivamente: la distanza dal
margine alto, dal margine sinistro, la larghezza e l'altezza dello strato. Se per le
ultime due proprietα non viene impostato nessun valore, il layer si adatta
automaticamente alle dimensioni effettive del contenuto. Le distanze sono solitamente
espresse in pixel (px), ma possono esserlo anche in percentuale o altre unitα di misura
previste dai fogli di stile. La posizione degli strati Φ sempre la stessa (180-70px) per
generare l'effetto di sovrapposizione caratteristico di questo esempio.
I colori di sfondo di ogni singolo layer sono modificabili grazie a ½background-color╗
per MSIE, e ½layer-background╗ per Netscape. ╚ possibile impostare un'immagine di
sfondo inserendo ½background-image(nomefile.gif)╗ per MSIE, e
½layer-background-image:Url(nomefile.gif)╗ per Netscape:
#layer2 {POSITION:absolute; Z-INDEX:20; VISIBILITY:hidden; LEFT:180px;
TOP:70px; width:250px; height:220px; background-image:URL(sfondo2.jpg);
layer-background-image:URL(sfondo2.jpg);}
Il codice:
P {font-size:50px; font-weight:bold; font-family:IMPACT; color:#000000;}
prevede la formattazione delle porzioni di testo precedute dal tag <P>. Mentre il
codice:
A:link, A:visited { text-decoration:none; color:blue; }
A:hover { text-decoration:underline;)
definisce il colore da assegnare ai link testuali, e che gli stessi non siano
sottolineati, se non quando il puntatore del mouse vi passa sopra. Quest'ultima
caratteristica funziona correttamente solo con MSIE 4, mentre Netscape permette solo di
evitare la sottolineatura.
Il linguaggio di script permette di associare alle caratteristiche del CSS-P determinati
eventi. Gli eventi sono un concetto tipico di molti linguaggi di programmazione, grazie ai
quali Φ possibile far interagire l'utente con l'ambiente nel quale si trova a operare.
Nel caso di pagine Html, gli eventi si manifestano nelle azioni che coinvolgono il
documento quando lo stesso risiede nel browser.
La gestione degli eventi di questo esempio Φ demandata al linguaggio di script Java.
Il codice:
var totalLayersInLoop=4;
var layerNumShowing=1;
stabilisce il numero di strati nella pagina (quattro) e quanti di essi debbano
visualizzarsi all'atto del caricamento della stessa (uno). Per aumentarne il numero Φ
necessario variare anche il primo valore.
L'istruzione ½var╗ consente di dichiarare delle variabili, e in casi come questo di
assegnargli un valore. Le variabili sono, in JavaScript, rappresentazioni di valori
impostati utilizzando un'espressione e possono essere globali o locali. Le prime sono
utilizzate da tutte le funzioni del documento, mentre le seconde sono utilizzate solo
all'interno di alcune.
Nell'esempio considerato in queste pagine Netscape permette di manipolare solo alcune
porzioni del documento (i layer predefiniti), in riferimento al codice:
layerRef="document.layers";
mentre Internet Explorer, rende manipolabile l'intero documento attraverso il codice:
layerRef="document.all";
Le funzioni:
function showLayerNumber(number)
function showLayer(layerName)
function hideLayer(layerName)
completano il codice JavaScript relativo alla manipolazione dei vari livelli di layer.
PerchΘ questo esempio funzioni correttamente Φ necessario impostare la funzione
"init()" all'interno del tag <BODY>:
<BODY onload="init()" background="sfondo.jpg">
I link vengono posizionati e impostati attraverso il codice:
<div style="position:absolute; top:120px; left:19px;
font-size:30px; font-family:ARIAL;">
<A HREF="javascript:showLayerNumber(2)">Layer A</A><BR>
<A HREF="javascript:showLayerNumber(3)">Layer B</A><BR>
<A HREF="javascript:showLayerNumber(4)">Layer C</A>
</div>
Il primo layer viene visualizzato di default in quanto impostato come
"visible", quindi i link si riferiscono ai restanti tre strati. La formattazione
e la posizione dei link sono gestisti dal tag DIV.
A questo punto, Φ necessario inserire il codice che richiami le funzioni impostate
all'interno del tag <SCRIPT> e precedentemente posizionate grazie alle proprietα
dei CSS-P. I layer sono quattro, e per ognuno va inserito un richiamo attraverso il tag
ID:
<DIV ID="layer1" >
<P>
Layer di presentazione
</DIV>
<DIV ID="layer2" >
<P>
LAYER A
</DIV>
Impostando due nuove funzioni Φ possibile creare altrettanti link che visualizzino in
sequenza i layer, sia in avanti (dal primo al quarto) sia indietro (dal quarto al primo).
Per ottenere questo effetto all'interno del codice fonte dello script va inserita la
funzione:
function showPreviousLayer(){
var layerNumToShow=layerNumShowing-1;
if (layerNumToShow < 1){layerNumToShow=totalLayersInLoop;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
per visualizzarli a ritroso. E il codice:
function showNextLayer(){
var layerNumToShow=layerNumShowing+1;
if (layerNumToShow > totalLayersInLoop){layerNumToShow=1;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
per visualizzarli con avanzamento progressivo.
Ogni layer Φ completamente indipendente dagli altri; ci≥ consente di inserire, oltre al
testo, anche componenti grafici, quali immagini o GIF animate.
Come sovrapporre i layer
Ampliando i concetti di posizionamento dinamico e adattandoli a funzionalitα avanzate
di scripting, Φ possibile creare effetti visivi molto interessanti. La seconda demo che
abbiamo creato, per esempio, mostra come sovrapporre un layer a un altro, facendo in modo
che la sovrapposizione si manifesti come una sorta di sipario. In altre parole, il nuovo
strato viene visualizzato da sinistra a destra in modo progressivo.
Per comprendere il codice di questo nuovo esempio Φ necessario introdurre il concetto di
area di ritaglio, ovvero ½clip╗. Questo strumento viene associato a un elemento
posizionato in modo assoluto nella pagina, e definisce un'area disponibile per la sua
visualizzazione. In questo modo tutto ci≥ che rimane escluso dall'area ½clip╗ non
verrα visualizzato nel documento. L'impostazione delle aree di ritaglio avviene
attraverso i valori: top, right, bottom e left.
Le funzioni ½clipvalues()╗ e ½clipBy()╗ gestiscono rispettivamente l'area
inizialmente visibile di layer, e l'area visualizzata in blue alla pressione del link
½Nuovo layer╗.
Le due funzioni ½wipe╗:
function wipe1() {
if (clipValues(block,'r')<250) {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",13)
function wipe2() {
if (clipValues(block,'r')>0) {
clipBy(block,0,-5,0,0)
setTimeout("wipe2()",13)
consentono l'effetto di visualizzazione progressiva del layer da sinistra a destra. Il
valore "250" si riferisce alla larghezza massima in pixel della sua area, e deve
coincidere con il valore "width" inserito all'interno del foglio di stile. Il
modello a oggetti previsto da Netscape impone al codice JavaScript di richiamare
individualmente i valori dell'area clip, al contrario di MSIE che li richiama tutti allo
stesso tempo
Impostato correttamente lo script Java Φ necessario richiamare la funzione ½onload╗
all'interno del tag <BODY>:
onLoad="init()"
La formattazione e il posizionamento dei due layer avvengono attraverso il seguente codice:
<div style="position:absolute; position:absolute; top:70px; left:70px;
font-size:30px; font-family:ARIAL; width:250px; heigth:200px;">
LAYER A<BR><BR>
<CENTER><A HREF="javascript:wipe1()">Nuovo
layer</A></CENTER>
</div>
<DIV ID="blockDiv" STYLE="position:absolute; top:70px; left:70px;
font-size:30px; font-family:ARIAL; clip:rect(0,0,200,0); width:250px; height:200px;
background-color:#0080FF; layer-background-color:#0080FF; color:#FFFFFF;">
LAYER B<BR><BR>
<A HREF="javascript:wipe2()">Torna indietro</A>
</div>
Il primo riguarda quello da visualizzare all'atto del caricamento della pagina che deve
avere coordinate identiche al secondo (top:70px; left:70px). Il link ½nuovo layer╗
richiama la funzione ½wipe1╗ che permette di sovrapporre visivamente l'altro livello. Il
link ½torna indietro╗ richiama la funzione ½wipe2╗ che nasconde nuovamente il secondo
layer, riportando la pagina al suo aspetto originario.
(mvalente@tecnet.it)