A layerekrõl általában
A Netscape Navigator 4.0 egy rendkívül fontos, jól hasznosítható új tulajdonsága volt a layerek használatának bevezetése. Aki már dolgozott valamilyen jobb képfeldolgozó, képretusáló programmal, például az Adobe Photoshoppal, annak nem jelenthet nagy újdonságot a layerek fogalma. A layereket (rétegek) legegyszerûbben fóliáknak képzelhetjük el. Minden egyes ilyen fóliarétegnek más és más lehet a tartalma, egymástól függetlenül kezelhetjük õket. Tehetünk rá képet, szöveget, ûrlapelemeket stb., majd a layereket elhelyezhetjük az oldalunkon. Az egyes rétegek egymásra is kerülhetnek, természetesen a felsõ rétegek takarják az alattuk levõ rétegeket, de ahol az egyes rétegek átlátszóak, ott átengedik az alattuk levõ rétegek tartalmát. Ezzel például könnyedén megvalósíthatunk pusztán HTML elemek használatával olyan képet, amelyre egy szöveget írunk, vagy az oldalon lévõ szöveg is kerülhet takarásba valamely más objektum, például egy kép által. A tapasztalatok azt mutatják, hogy MS Internet Explorer alatt a layeres példák nagy része nem mûködik helyesen. Sajnos ezzel számolni kell...
Layereket a <LAYER> illetve az <ILAYER> HTML elemekkel
készíthetünk. Az alábbi táblázat
bemutatja a beállítható tulajdonságokat:
| Tulajdonság | Leírás |
| name = "layer_neve" | A réteg neve |
| left = x | A bal felsõ sarok x koordinátája |
| top = y | A bal felsõ sarok y koordinátája |
| z-index = layer_index | A layer sorszáma |
| width = szélesség_pixelekben | A layer szélessége képpontokban |
| clip = "x1,y1,x2,y2" | A réteg látható területét definiálja (négyzet) |
| above = "layer_neve" | A megadott nevû réteg felett jelenik meg a layerünk |
| below = "layer_neve" | A megadott nevû réteg alatt jelenik meg a layerünk |
| visibility = show | hide | inherit | A réteg láthatósága |
| bgcolor = "rgb_szín" | A réteg háttérszíne |
| background = "kép_URL" | Háttérkép |
A <LAYER> HTML elemmel az oldal tetszõleges pozíciójába elhelyezhetünk layereket. A pozíciót a left és a top attribútumok adják meg. Ezek a layer bal felsõ pontjának helyét határozzák meg. Amennyiben nem adunk meg ilyen értékeket, akkor az alapértelmezett pozíció az ablak bal felsõ sarka. Az <ILAYER> elem a layer pozícióját nem határozza meg explicit módon, hanem a dokumentum aktuális pozíciójába helyezi el.
Most tekintsünk meg egy rövid példát.
<HTML> <LAYER NAME="negyzet" Z-INDEX=0 LEFT=60 TOP=25> <IMG SRC="pld091.gif"> </LAYER> <LAYER NAME="haromsz" Z-INDEX=1 LEFT=30 TOP=50> <IMG SRC="pld092.gif"> </LAYER> <LAYER NAME="szoveg" Z-INDEX=2 LEFT=50 TOP=70> <FONT SIZE=+3>Layer példa</FONT> </LAYER> </HTML>
Amint látható, három különbözõ layert definiáltunk. Minden, ami a <LAYER> </LAYER> illetve az <ILAYER> </ILAYER> HTML elemek között van az az adott layerhez tartozik. A példában a név (name) és a pozícionáló (left, top) attribútumok mellett megadtuk a z-index tulajdonságot is, ami a layerek megjelenítésének sorrendjét határozza meg. A legkisebb z-indexû layer jelenik meg legelõször, ez kerül legalulra. A legnagyobb indexû jelenik meg legfelül. Példánkban ez a szöveget tartalmazó layer. A z-index tetszõleges pozitív egész lehet, így ugyanezt az eredményt értük volna el, ha az elsõ layernek 5, a másodiknak 17, a harmadiknak 33 z-index értéket adunk.
A JavaScript és a layerek kapcsolata
A layereket JavaScript-en keresztül is kezelhetjük. Ezt két módon tehetjük meg legegyszerûbben. Adjunk nevet a layernek:
<LAYER NAME="layer_neve"> ... </LAYER>
Ekkor a layert elérhetjük a document.layers["layer_neve"] ill. a document.layer_neve hivatkozásokkal. Elérhetjük a layereket a korábbiakban már megismert indexes módszerrel is, bár ennek használata nem túl kényelmes. A legalsó layert a document.layers[0] hivatkozással érhetjük el. A következõt a document.layers[1] néven és így tovább. Vegyük észre, hogy ezen indexelés nem egyezik meg a z-indexeléssel!
A layerek attribútumainak nagy része elérhetõ és módosítható JavaScript segítségével. Ezt használjuk ki a következõ kis példában
A forráskód pedig a következõ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript elrejtése
function Show(){
if (document.layers["myLayer"].visibility=="show")
document.layers["myLayer"].visibility="hide";
else
document.layers["myLayer"].visibility="show";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<ILAYER NAME="myLayer" visibility="show">
<FONT SIZE=+2 COLOR=#FF0000> Ez a szöveg a layer része... </FONT>
</ILAYER>
<FORM>
<INPUT TYPE="button" VALUE="Réteg elrejtése/mutatása" onClick="Show()">
</FORM>
</BODY>
</HTML>
A gombra kattintva a Show() függvényt hívjuk meg, amely a visibility attribútumot állítja át "hide"-ra (elrejt), ha az eredetileg "visible" (látható) volt, és fordítva. Ezt egy feltételes elágazással teszi. Azzal, hogy az attribútumot átállítjuk, elrejthetjük illetve megjeleníthetjük az adott layert. Az új értéket ("hide" vagy "show") mint sztringet kell megadnunk (például document.layers["myLayer"].visibility="hide" és nem document.layers["myLayer"].visibility=hide !!)
A layerek left és top attribútumaihoz is rendelhetünk új értékeket JavaScript segítségével. Hatására layerünk új helyen jelenik meg. Például a következõ sor 150-re állítja a layer vízszintes pozícióját:
document.layers["layer_neve"].left = 150;Ha egy olyan programot írunk, amely folyamatosan változtatja ezeket az értékeket, akkor egyszerû animációt készíthetünk. Erre mutat példát a következõ program.
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- A JavaScript kód elrejtése
layerArr = new Array();
index = 0;
function setArr(name,dir){
layerArr[index] = new Array(2);
layerArr[index][0] = name;
layerArr[index][1] = dir;
index++;
}
function init(){
setArr("layer1",true);
setArr("layer2",false);
setArr("layer3",true);
}
function move(){
for (var i=0; i<3; i++){
set_layer_pos(i);
}
}
function change_dir(i){
layerArr[i][1] = !(layerArr[i][1]);
}
function set_layer_pos(i){
var layer = document.layers[layerArr[i][0]];
var pos = layer.left;
if (pos > 300) change_dir(i); //elértük a jobb végét, hatra megyünk
if (pos < 0) change_dir(i); //elértük a bal végét, újra elõre
if (layerArr[i][1]) pos += 5; //ha elõre megyünk, növeljük a pos-t
else pos -= 5; //egyébként csökkentjük
layer.left = pos; //beállítjuk az új pozíciót
}
// -->
</SCRIPT>
<BODY onLoad="init(); setInterval('move()',20)">
<LAYER NAME="layer1" Z-INDEX=0 LEFT=0>
<IMG SRC="pld091.gif">
</LAYER>
<LAYER NAME="layer2" Z-INDEX=1 LEFT=150>
<IMG SRC="pld092.gif">
</LAYER>
<LAYER NAME="layer3" Z-INDEX=2 LEFT=300>
<FONT SIZE=+3>Layer példa</FONT>
</LAYER>
</BODY>
</HTML>
A példában három layert hoztunk létre (layer1, layer2, layer3 néven). Már az oldal betöltésekor meghívjuk az init() függvényt, amely létrehoz egy olyan tömböt, amelynek minden eleme kételemû tömb (setArr() függvény segítségével). Ebben tároljuk el a layerek nevét és mozgási irányát. Ha az iránynak true értéket adunk, akkor az azt jelenti, hogy a layer balról jobbra mozog a képernyõn. False esetben éppen az ellenkezõ irányban halad.
Az init() függvény után a move() függvényt hívjuk meg a setInterval() segítségével. Ez az 1.2-es JavaScriptben jelent meg. A megadott idõintervallumonként meghívja az elsõ paraméterében szereplõ függvényt. Hasonló a setTimeout() függvényhez, azzal a különbséggel, hogy csak egyszer kell meghívni.
A mozgatást a move() végzi úgy, hogy minden
layerre meghívja a set_layer_pos() függvényt.
Ez megvizsgálja, hogy az adott layer elérte-e a mozgatási
terület határát, ha igen akkor megváltoztatja
a mozgatás irányát (change_dir()). A mozgatási
iránytól függõen növeljük ill. csökkentjük
a vízszintes pozíció értékét
(pos), amit visszaírunk az adott layer left attribútumába.