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...
Layerek létrehozása
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
Ez
a szöveg a layer része...
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 !!)
Mozgó rétegek
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.
| 
