Argomenti trattati: i layer nell'implementazione di Netscape Navigator.
L'oggetto layer corrisponde a al tag <LAYER></LAYER> dell'HTML, proprio di Netscape Navigator per le versioni 4 e 5. Questo oggetto non è rappresentato su MSIE, né è stato accettato come uno standard.
Il suo utilizzo è pertanto limitato e non funzionerà con browser più recenti o con case produttrici differenti.
Esso può inoltre essere utilizzato attraverso i cascading style sheet,
tramite il tag <DIV></DIV>. E' presente su questo sito un esempio
al riguardo, che tratta anche il posizionamento dinamico degli elementi del
documento.
Il layer, o livello, corrisponde a un blocco nel documento HTML con
caratteristiche proprie, rispetto al resto della pagina, ed è nato per
permettere un maggior dinamismo negli elementi delle pagine HTML, di per sé
statiche.
L'oggetto layer può essere richiamato in più modi attraverso il codice JavaScript:
| (......) <STYLE TYPE="text/css"> <!-- #layer1 {position:absolute;top:20px; left:5px;background-color:#CC00EE;border-width:1; border-color:#CC00EE;width:200px;} --> </STYLE> <!-- ogni stile definito nel documento che possegga una posizione relativa o assoluta, sarà visto da Netscape come un livello, ovvero come un layer. Generalmente, ciò equivale a richiamare nel documento un ID in un tag <DIV> o <SPAN> che implementi lo stile considerato. --> <BODY BGCOLOR=white> <DIV ID="layer1"> <H1>Questo è un livello!!!</H1> <P>Questo è un paragrafo in un livello!</P> </DIV> </BODY> (.......) // OPPURE: (......) <BODY> <LAYER ID="layer1" TOP="300" LEFT="100" BGCOLOR=yellow CLASS="mystyle"> <H1>Questo è un livello!!!</H1> <P>Questo è un paragrafo in un livello!</P> </LAYER> </BODY> (......) <!-- attenzione: va notato che un layer può possedere uno stile proprio, altrove definito. --> |
In questo caso, si possono usare le 3 seguenti modalità:
dato il layer mylayer, è possibile accedervi tramite JavaScript con uno di
questi metodi:
- document.layer.mylayer;
- document.layers["mylayer"];
- document.layers[indice_numerico_del_layer_nel documento]; // dove l'indice numerico parte da zero
La posizione di un layer è definita a partire dall'angolo in alto a sinistra
del documento, attraverso gli attributi top e left:
<LAYER ID="layer1" TOP="300"
LEFT="100" BGCOLOR=yellow CLASS="mystyle">
Per definizione, la posizione di un layer è considerata absolute
(assoluta rispetto al resto del documento), ma esiste anche la possibilità di
definirla come relativa rispetto agli altri elementi del documento, quindi relative.
Con questo proposito Netscape ha messo a disposizione l'ilayer
(inflow layer), la cui caratteristica è appunto quella di posizionarsi nel
flusso del documento:
| (......) <ILAYER ID=ilayer1> <P>Questo è un paragrafo in un ilayer</P> </ILAYER> <STYLE type="text/css"> <!-- #ilayer1 {position:relative; } --> </STYLE> (......) |
Proprietà ed eventi degli oggetti layer e ilayer:
| Proprietà | |
|---|---|
| position | Viene usata se il livello viene definito tramite il tag <DIV> o <SPAN>: sarà absolute per il layer, relative per l'ilayer |
| id | Può corrispondere all'ID nel
CSS che definisce il layer, oppure al nome del tag <LAYER>. Esiste anche un attributo name, generalmente meno utilizzato |
| left, top | Corrispondono alla distanza orizzontale e verticale dall'angolo in alto a sinistra del documento che contiene il livello |
| pagex, pagey | Corrispondono, solo per il tag <LAYER>, alla posizione dll'angolo in alto a sinistra del livello stesso, piuttosto che del documento che lo include |
| src, source-include | Definisce la pagina esterna
cui il livello si collega, ad esempio: src="miohtml.htm". Se si vuole usare un CSS, deve essere invece utilizzato il seguente codice: source-include:url("miohtml.htm"); |
| z-index, above, below | z-index definisce la
posizione in "profondità" del livello, come se più pagine si
disponessero l'una sull'altra. Se un layer ha z-index="2", si troverà sovrapposto al layer che ha z-index="1". Si possono usare come valori solamente degli interi positivi. gli attributi above e below possono invece essere utilizzati soltanto con il tag layer, e non hanno corrispondenza nei CSS. Determinano rispettivamente il livello sopra e sotto un livello rispetto a quello immediatamente successivo. |
| width, heigth | Specificano la larghezza e l'altezza del livello |
| clip | Definisce l'area di
visibilità del livello, come se si trattasse di un sottorettangolo dello
stesso. Si può definire sia nel tag <LAYER> che attraverso i CSS, nel seguente modo: <LAYER CLIP="20,20,50,100"> clip:rect(0,100,100,0); /* per i CSS */ Questo vuol dire che soltanto un frammento rettangolare del livello sarà mostrato e reso disponibile alla visualizzazione. Da notare che, se invece di quattro coordinate ne vengono definite 2, ad esempio: <LAYER CLIP="50,100"> questo equivale a definire : <LAYER CLIP="0,0,50,100"> La posizione va dall'angolo in alto a sinistra dell'area all'angolo in basso a destra della stessa. |
| visibility | Corrisponde alla visibilità
del livello, e può essere richiamata sia dai CSS che attraverso il codice
JavaScript e direttamente dal tag <LAYER>. Può assumere i seguenti valori: 1) INHERIT: il layer eredita la proprietà visibility dal documento o dal livello che lo contiene, questo è il valore di default; 2) SHOW: il layer è visibile; 3)HIDE: il layer non è visibile, ma occupa ugualmente lo spazio e la posizione ad esso assegnata tramite codice; |
| bgcolor, background-color | Corrisponde al colore di sfondo del documento, definito rispettivamente tramite il tag <LAYER> e tramite il CSS |
| background, background-image | Corrisponde all'immagine di sfondo del documento, definita rispettivamente tramite il tag <LAYER> e tramite il CSS |
Per i browser che non supportano i layers è possibile definire il tag:
<NOLAYER></NOLAYER>,
attraverso il quale è possibile una gestione differenziata del browser.
Certamente una delle caratteristiche di maggior effetto dell'oggetto layer è
quella di permettere il movimento di sezioni del documento. Per fare questo, è
possibile utilizzare le proprietà e i metodi JavaScript appositamente forniti dallo stesso
oggetto.
Molte delle proprietà, come si può vedere, corrispondono direttamente
a quelle dell'oggetto come definto tramite il tag <LAYER> o tramite i CSS
e non sono spiegate in quanto discusse discusse sopra:
| Proprietà: | |
|---|---|
| document | il document contenuto nel layer |
| name | il nome del layer (non usato: generalmente si usa id) |
| left e top | |
| pageX e pageY | |
| zIndex | |
| visibility | |
|
clip.top clip.right clip.left clip.bottom clip.width e clip.height |
Rispetto a quanto spiegato precedentemente, si
aggiungono clip.width e clip.heigth, rispettivamente equivalenti a: clip.rigth=clip.left + mio_valore; clip.bottom=clip.top + mio_valore; |
| background | |
| bgColor | |
| siblingAbove | l'oggetto layer superiore a quello considerato, o null se l'oggetto è quello superiore |
| siblingBelow | l'oggetto layer inferiore a quello considerato, o null se l'oggetto è quello inferiore |
| above | |
| below | |
| parentLayer | il documento o il layer che contiene il livello considerato |
| src | |
I metodi invece, permettono di spostare e ridimensionare il livello:
| Metodi: | |
|---|---|
| moveBy(x,y) | Sposta secondo una posizione assoluta il livello considerato |
| moveTo(x,y) | Sposta il livello secondo una posizione assoluta, o relativa secondo la proprietà position del layer o ilayer considerato, come se venissero settate le proprietà top e left |
| moveToAbsolute(x,y) | Sposta il livello nella pagina, considerata come window, indipendentemente dal livello o dal frame o dal documento che lo contiene |
| resizeby(width, height) | Ridimensiona il livello |
| resizeTo(width, heigth) | Ridimensiona il livello |
| moveAbove(altro_layer) | Sposta il layer sopra altro_layer |
| moveBelow(altro_layer) | Sposta il layer sotto altro_layer |
| load(src, width) | carica nel layer un differente documento HTML, e ne ridimensiona contemporaneamente la proprietà width, ovvero la larghezza |
Esempi di applicazione dei metodi potrebbero essere:
document.mylayer.moveTo(200,300);
document.layers["mylayer"].moveBelow("upper_layer");
E' importante ricordare che l'oggetto layer non è più disponibile nelle versioni di Navigator dalla 6 in poi (vedi gli approfondimenti); l'implementazione del browser si è invece orientata verso le specifiche del W3C.