Il Taglio dei Layer

Il taglio, o clipping; si riferisce alla parte del layer che sarà visibile. Bisogna intendersi bene sulla differenza tra valore di clip e ampiezza e altezza - non sono la  stessa cosa. Ampiezza e altezza notificano al browser come far girare gli elementi dell'HTML al suo interno. Mentre il clipping costruisce una finestra attraverso la quale vedere il layer  e non ha effetto su nessuna delle sue proprietà (left, top, width, height e visibility).

La regione di taglio viene definita come un quadrato in cui venga posto il valore per ognuno dei quattro lati (top, right, bottom e left). Su ognuno dei lati potete tagliar via una porzione di spazio visibile, oppure aggiungerla. Tutte le misure di taglio sono riferite a quel layer in particolare e i loro valori sono presi a partire dalla top-left location [è la posizione in alto a sinistra dell'area di taglio].

Clip

La sintassi CSS per il taglio è:

clip:rect(top,right,bottom,left)
Dove top, right, bottom e left sono valori dati in pixel [rispettivamente: alto, destro, basso e sinistro - si tratta di misure relative all'area di taglio - osservate bene la figura] . Non dimenticate il loro ordine - altrimenti le vostre finestre risulteranno di forma diversa da quella che volevate costruire.

Qui c'è una tag di tipo DIV per definire l'area visibile:

<DIV ID="blockDiv" STYLE="position:absolute; 
left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-color:#FF0000; layer-background-color:#FF0000;">
</DIV>
In questo caso viene creato un bordo di 10 pixel attorno ai lati del layer poiché top e left sono impostati a -10. Per quanto riguarda il valore di right, questo è 110, cioé 10 pixel in più della misura originale del layer. Lo stesso vale per bottom che 60 (cioé 50+10).

Ho messo anche alcune proprietà dei CSS in più: Il background-color (per ie4) e il layer-background-color (per Netscape) vengono utilizzati solo per colorare tutta l'area. Questo ci permetterà di vedere il layer come un'area rettangolare e aiuterà a visualizzare cosa accade quando lo tagliamo. Usualmente non sarebbe necessario determinare l'altezza (height), ma nel caso del clipping  siamo obbligati a farlo per come IE tratta lo spazio aggiuntivo sotto l'ultimo elemento nel layer.

Potete anche inserire delle immagini di sfondo nel layer. Il codice CSS per IE è background-image:URL(filename.gif) e, per Netscape,  layer-background-image:URL(filename.gif). Ma perché Netscape la mostri in modo preciso dovrete inserire anche un'altra proprietà dei CSS: repeat:no. Questo è il codice completo per un layer con una immagine in background:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50;
 clip:rect(-10,110,60,-10); background-image:URL(filename.gif); 
layer-background-image:URL(filename.gif); repeat:no;}

Il Clipping e JavaScript

Una volta dato il taglio al layer potete ottenere o cambiare quei valori usando JavaScript proprio come abbiamo fatto per la dislocazione.

Il Clipping in Netscape:

In Netscape si possono cambiare i valori individualmente:

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left
Per mostrare un avvertimento del valore top di clip dovete scrivere:
alert(document.divName.clip.top)
Quindi per portare il valore top a 50 pixel:
document.divName.clip.top = 50
Il Clipping in Internet Explorer:

In IE si devono impostare i valori di taglio tutti insieme. Per esempio per vedere i valori di clip scriverete:

alert(divName.style.clip)
Questo restituirà una stringa che rappresenterà l'impostazione di tutti i valori di taglio. Questo sotto è un esempio di come verrebbero rappresentati i valori:
"rect(0px 50px 100px 0px)"
Se volete cambiare un valore siete obbligati ad impostare tutta la stringa di dati nello stesso momento:
divName.style.clip = "rect(0px 100px 50px 0px)"
Questo rende il lavoro un po' noioso in ie4. Vi propongo una funzione generica che poteter usare per verificare i valori di clip su entrambi i browser:

La Funzione clipValues()

La funzione clipValues() può essere utilizzata per ottenere i valori di taglio di ciascun lato di un layer.
function clipValues(obj,which) {
        if (ns4) {
                if (which=="t") return obj.clip.top
                if (which=="r") return obj.clip.right
                if (which=="b") return obj.clip.bottom
                if (which=="l") return obj.clip.left
        }
        else if (ie4) {
                var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
                if (which=="t") return Number(clipv[0])
                if (which=="r") return Number(clipv[1])
                if (which=="b") return Number(clipv[2])
                if (which=="l") return Number(clipv[3])
        }
}
Ciò che dovete fare sarà dire quale layer (definito come variabile puntatore) e di quale lato volete il valore. Per esempio, una volta che noi abbiamo definito una variabile puntatore per un layer di tipo "blockDiv", facciamo vedere una finestra di avvertimento del valore top scrivendo::
alert(clipValues(block,"t"))
Il lato di cui desiderate sapere il valore deve avere la prima lettera tra virgolette -  "t" (top), "r" (right), "b" (bottom), "l" (left).

Cliccate qui per vederne un esempio.

Cambiare i Valori di Clip

Per cambiare i valori ho scritto due generiche funzioni che possono essere usate abbastanza semplicemente.

La Funzione clipTo():

clipTo() permette di tagliare ancora il layer di un valore specifico.

function clipTo(obj,t,r,b,l) {
        if (ns4) {
                obj.clip.top = t
                obj.clip.right = r
                obj.clip.bottom = b
                obj.clip.left = l
        }
        else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
Per utilizzarla dovete fornire il nome del layer/oggetto da usare, e il valore di taglio di ogni lato - rispettivamente top, right, bottom, left.
clipTo(block,0,100,100,0)
La Funzione clipBy():

clipBy() permette di far slittare il valore di clip di un determinato ammontare di pixel - aggiunge o sottrae dai valori di clip su ogni lato:

function clipBy(obj,t,r,b,l) {
        if (ns4) {
                obj.clip.top = clipValues(obj,'t') + t
                obj.clip.right = clipValues(obj,'r') + r
                obj.clip.bottom = clipValues(obj,'b') + b
                obj.clip.left = clipValues(obj,'l') + l
        }
        else if (ie4) obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+(this.clipValues(obj,'r')+r)+"px "+Number(this.clipValues(obj,'b')+b)+"px "+Number(this.clipValues(obj,'l')+l)+"px)"
}
Simile alla clipTo() dovete solo stabilire di quanto volete tagliare o aggiungere ai valori di taglio e lo farete con la seguente stringa:
clipBy(block,0,10,5,0)
Questo aggiungerà 10 pixel a right e 5 al valore bottom.

Cliccate qui per vedere un esempio che usa tutte e due le funzioni: clipTo() and clipBy()

Netscape è probabilmente migliore per vedere l'esempio per come maneggia i colori del background dei layer: mostrerà sempre il colore del layer qualsiasi sia il taglio effettuato. Al contrario in IE quando tagliate fuori dai limite del layer (aggiungendo così dei bordi) non potrete vedere i lati del layer.

Il Clipping (Wiping) Animato

Ponendo i comandi della clipBy() in una funzione di loop potete creare tutta quella serie di effetti a scomparsa (wiping) che sono certo avete già visto. Probabilmente sarebbe più semplice che voi costruiste le vostre funzioni wipe(). E' possibile creare una funzione generica, ma ho pensato di includerla nel Dynamic Layer Object come metodo aggiuntivo (andate alla lezione Wipe Method  per maggiori informazioni). La verità è che scrivendola autonomamente avrete la possibilità di inserire un minor numero di righe di codice. Farete come per le slides. Create una funzione di loop che ri-tagli ripetutamente il layer:
function wipe1() {
        clipBy(block,0,5,0,0)
        setTimeout("wipe1()",30)
}
Dobbiamo, comunque, pensare anche a fermarla, così effettuate un test per vedere se il lato del layer ha già raggiunto il limite:
function wipe1() {
        if (clipValues(block,'r')<200) {
                clipBy(block,0,5,0,0)
                setTimeout("wipe1()",30)
        }
}
Cliccate qui per vedere un esempio di wipe.
Home Prossima Lezione: Annidare i Layer
copyright 1998 Dan Steinman