Corso di HTML

I Layer: metodi ed esempi

 

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

Come vedete non sono molti, ma sono di facile utilizzo e si rivelano molto utili in tante circostanze, in particolare se usati con i linguaggi di script.

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