Nella scorsa puntata abbiamo analizzato gli attributi e le proprietà dei layer, vediamo adesso in dettaglio quali sono tutti i metodi dei layer:
Metodi
|
Nome Metodo |
Parametri |
Tipizzazione parametri |
Descrizione |
|
offset |
( x,y ) |
intero, intero |
Fa si che il layer venga spostato x pixel a destra e y pixel in basso |
|
moveAbove |
( nome_layer ) |
stringa |
Sposta il layer corrente sopra quello specificato da nome_layer |
|
moveBelow |
( nome_layer ) |
stringa |
Sposta il layer corrente sotto quello specificato da nome_layer |
|
moveTo |
( x,y ) |
intero, intero |
Sposta il layer nella posizione ( x,y ) misurata in pixel dall'angolo superiore sinistro dello schermo |
|
resize |
(larghezza, altezza) |
intero, intero |
Ridimensiona il layer alle dimensioni in pixel specificate |
Con tali linguaggi ( sono supportati praticamente tutti ) è possibile modificare dinamicamente i layer, ad esempio attivandoli e disattivandoli o spostandoli.
I layer sono oggetti del documento e per tale motivo devono essere riferite attraverso l'oggetto HTML document.
Ad esempio per riferire la proprietà background del layer chiamato pippo, si può procedere nel modo seguente:
document.pippo.background
per spostare lo stesso layer nella posizione a 50 pixel a destra e 20 in basso dall'origine della finestra, occorre fare così:
document.pippo.moveTo (50,20)
In quest'ultimo caso, come avrete potuto notare, non abbiamo usato una proprietà, bensì un metodo.
Vediamo adesso alcuni esempi. Per provarli copiate ed incollate il codice in un file con estensione htm o html e poi caricatelo con il browser. Notate che questi esempi potrebbero non funzionare correttamente con il browser che avete; per avere qualche chance in più di successo provate con Netscape ( quella che li ha creati ).
Iniziamo con un esempio di tre layer affiancati rispettivamente di colore rosso, verde e blu:
<HTML>
<HEAD><TITLE> Esempio d'uso di layer </TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<LAYER NAME="Layer1"
LEFT=0 TOP=0 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW BGCOLOR="#FF0000"></LAYER>
<LAYER NAME="Layer2" LEFT=100 TOP=0 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#00FF00"></LAYER>
<LAYER NAME="Layer3" LEFT=200 TOP=0 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#0000FF"></LAYER>
</BODY>
</HTML>
Il loro uso è proprio banale, complichiamo giusto un pochetto le cose facendoli sovrapporre uno sull'altro in diagonale:
<HTML>
<HEAD><TITLE> Esempio d'uso di layer sovrapposti</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<LAYER NAME="Layer1" LEFT=0 TOP=0 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#FF0000" zINDEX=1>
<div align="center">rosso </div>
</LAYER>
<LAYER NAME="Layer2" LEFT=25 TOP=25 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#00FF00" zINDEX=2>
<div align="center">verde </div>
</LAYER>
<LAYER NAME="Layer3" LEFT=50 TOP=50 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#0000FF" zINDEX=3>
<div align="center">blu </div>
</LAYER>
</BODY>
</HTML>
Anche qui non dovrebbero esserci troppi problemi, vediamo l'uso dell'attributo di clipping:
<HTML>
<HEAD><TITLE> Esempio d'uso di layer con clipping</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<LAYER NAME="Layer1" LEFT=0 TOP=0 WIDTH=100 HEIGHT=100 VISIBILITY=SHOW
BGCOLOR="#FF0000" zINDEX=1 CLIP="10,10,90,90">
<div align="center">Il colore di questo layer è rosso,
ma non tutto il testo sarà visualizzato </div>
</LAYER>
</BODY>
</HTML>
L'ultimo esempio è quello di un layer in-flow:
<HTML>
<HEAD><TITLE> Esempio d'uso di layer con clipping</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
Questo è normale testo,
<ILAYER NAME="Layer1" VISIBILITY=SHOW BGCOLOR="#FF0000">
mentre questo è del testo in un layer in-flow,
</ILAYER>
mentre quest'altro è ancora normale testo
</BODY>
</HTML>
Questo è tutto per quanto riguarda i layer, dalla prossima volta inizieremo a parlare dei potentissimi CSS ( Cascade Style Sheet ) cioè i fogli di stile a cascata.
Torna all'indice Generale del corso di Corso di HTML di Software Planet