Layer objektum

Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Layer objektum
A layer objektum bemutatása
Elemváltozók (tulajdonságok) :
above		Előtérben lévő layer
background		Réteg háttérkép
bgColor		Réteg háttérszín
below		Háttérben lévő réteg
clip		A réteg kijelző területe
document		Aréteg document objektuma
left		A bal felső sarok relatív távolsága (bal érték)
length		A rétegek száma
name		A réteg neve
pageX		A bal felső sarok abszolút távolsága (vizszintesen)
pageY		A bal felső sarok abszolút távolsága (függőlegesen)
parentLayer		A szülő layer objektumum
siblingAbove		Az előtérben lévő réteg objektum
siblingBelow		A háttérben lévő réteg objektum
src		A réteg tartalom beemelés külső fájlból
top		A bal felső sarok relaív távolsága (felső érték)
visibility		A réteg láthatósága
zIndex		A layer z indexe (egymáson levő rétegek poziciója)
Elemfüggvények (metódusok) :
captureEvents()		Esemény figyelés
handleEvent()		Esemény kezelés
load()		Külső fájl betöltése
moveAbove()		Előtérebe hozni
moveBelow()		Háttérbe küldeni
moveBy()		A layer mozgatása megadott számú pixel-lel
moveTo()		A layer mozgatása relatív pozicióba
moveToAbsolute()		A layer mozgatása abszolút pozicióba
releaseEvents()		Esemény figyelés vége
resizeBy()		Magasság és szélesség módosítása egy bizonyos értékkel (pixelben megadva)
resizeTo()		Magasság és szélesség beállítása egy bizonyos értékre (pixelben megadva)
routeEvent()		Esemény továbbadása a hierarhiának megefelelően

A layer objektum bemutatása

A layer objektum által, mely a JavaScript objektum hierarhiában a document objektum alatt található, lehetőségünk van a layer-ok elérésére, de csak Netscape böngészők által. Egy layer objektum, melyet magyarul a réteg szóval illetünk, a HTML fájl betöltésekor keletkezik. A layer tulajdonképpen egy dokumentum, mely objektumokat tartalmaz. A rétegek elhelyezkedését, a rajta levő szövegek és grafikák pozicionálását illetve a láthatóságát külön megadhatjuk.

A rétegeket többféle módon is megszólíthatjuk :

Példa 1:

document.layers[#].talajdonság
document.layers[#].metódus()
szin = document.layers[0].bgColor;

Példa 2:

document.rétegneve.talajdonság
document.rétegneve.metódus()
szin = document.fejresz.bgColor;

Magyarázat:

A layerokat kétféle módon szólíthatjuk meg :

sorszámmal, ahol a számozás 0-val kezd / Példa 1
névvel, ahogy az a name= után lett megadva / Példa 2

above

Megadja a layer felett (az előtérben) levő réteget.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="sarga" top=100 left=50 height=300 bgcolor=yellow>
A sárga layer tartalma
</layer>
<layer name="lila" top=130 left=60 height=200 bgcolor=#FFE0FF>
A lila layer tartalma
</layer>
<a href="javascript:alert(document.sarga.above.name)">
Mi van a sárga felett ?</a><br>
<a href="javascript:alert(document.sarga.above.top)">
És hány pixelre van a felső széltől ?</a><br>
</body></html>

Magyarázat:

A példában egy sárga és egy lila layert, továbbá két hivatkozást definiáltunk. Ha rákattintunk az elsőre, akkor egy üzenőablakban kijelzi annak a rétegnek a nevét, mely a sárga felett van. A második a felső szélétől való távolságot adja meg.

background

Megadja a layer háttérképét, melyet az alábbi példában dinamikusan változtatunk.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
ujkep = new Image();
ujkep.src = "005.jpg"
function hatter_valt() {
 document.proba.background.src=ujkep.src;
}
</script>
</head><body>
<layer top=100 name="proba" left=50 height=300 bgcolor=yellow>
Ez a sor itt a layer tartalma
</layer>
<a href="javascript:hatter_valt()">Új hátteret ad</a>
</body></html>

Magyarázat:

A példában megadtuk egy layer háttérképét.Ha ráklikkelünk a hivatkozásra, akkor az a háttérképet lecseréli egy másikra. Vegyük észre, hogy a HTML fájl fejrészében lévő Scriptterületen deklaráltunk egy images objektumot. Maga a csere azáltal jön létre, hogy a background.src-nak értéket adunk.

bgColor

Megadja a réteg háttérszinét, melyet az alábbi példában dinamikusan változtatunk.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function csere() {
 if(document.proba.bgColor=="aqua")
  { document.proba.bgColor="yellow"; return; }
 else  
  { document.proba.bgColor="aqua"; return; }
}
</script>
</head><body>
<layer top=150 name="proba" left=100 height=200 bgcolor="aqua">
Inhalt des Layers
</layer>
<a href="javascript:csere()">Másik háttérszin</a>
</body></html>

below

Meghatározza a háttérben levő réteget.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="sarga" top=100 left=50 height=200 bgcolor=#FFFFE0>
A sárga layer tartalma
</layer>
<layer top=150 name="lila" left=100 height=200 bgcolor=#FFE0FF>
A lila layer tartalma
</layer>
<a href="javascript:alert
(document.lila.below.name)">Mi van mögötte?</a><br>
<a href="javascript:alert
(document.sarga.below.left)">Bal behúzás ?</a><br>
</body></html>

clip

Megadja, hogy a réteg mely részleteit láthassuk.Ennek az elemváltozónak további kiegészítő tulajdonságai is vannak :

`clip.top`	a látható layer-szelet bal felső sarkának felső értéke (pixelben)
`clip.left`	a látható layer-szelet bal felső sarkának bal értéke (pixelben)
`clip.bottom`	a látható layer-szelet jobb alsó sarkának alsó értéke (pixelben)
`clip.right`	a látható layer-szelet jobb alsó sarkának jobb értéke(pixelben)
`clip.width`	a látható layer-szelet szélessége (alternatív megadás a jobb alsó sarok helyett)
`clip.height`	a látható layer-szelet magassága(alternatív megadás a jobb alsó sarok helyett)

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function kicsinyit() {
   with(document.proba) {
    if(clip.height > 0 && clip.width > 0)
	 { clip.height-=10; clip.width-=10; }
   } 
  }
  function nagyit() {
   with(document.proba)  {
    if(clip.height < 200 && clip.width > 200)
	 { clip.height+=10; clip.width+=10; }
   } 
  }
</script>
</head><body>
<layer name="proba" 
top=80 left=80 height=200 width=200 bgcolor=#FFFFE0>
A layer tartalma itt látható ..
</layer>
<a href="javascript:kicsinyit()">Kicsinyit</a><br>
<a href="javascript:nagyit()">Nagyit</a>
</body></html>

Magyarázat:

A példában egy réteget definiáltunk, melynek a teljes felülete látható. Mivel clip-et nem adtunk meg, ezért a clip elemváltozó al-tulajdonságai a következők : clip.top és clip.left 0, továbbá a clip.width, clip.height, clip.bottom és clip.right mind 200. Ha rákattintunk a Kicsinyit hívásra, akkor az a látható layer terület jobb alsó sarkának értékeiből elvesz 10 pixelt, a Nagyit meg hozzáad 10-et.

document

Minden layer objektumot a Netscape böngészője úgy kezel mint egy kis dokumentumot. Ezért van a layer-nak egy saját document objektuma, mely éppúgy működik mint az általános document objektum, melyen keresztül a grafikákat, űrlapokat, szöveges objektumokat stb.. elérhetjük. Ha szeretnénk ezeket az objektumokat layer-on keresztül elérni, akkor a layer objektum saját document-objektumát kell mgszólítani :

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
 function modosit() {
  document.sajat.document.open();
  document.sajat.document.write("Nincs réteg hívás többé!");
  document.sajat.document.close();
 }
</script>
</head><body>
<layer name="sajat" bgcolor=#FFFFE0>
<a href="javascript:modosit()">Layer hívás módosítása</a>
</layer>
</body></html>

Magyarázat:

A példában egy layert, továbbá egy hivatkozást definiáltunk. Ha rákattintunk a hivási pontra, akkor az meghívja a modosit()függvényt, melyet a HTML fájl fejrészében lévő JavaScript területen deklaráltunk. Ez a függvény tipikus document objektum metódusokat hív meg mint az open(), write() és close(). A különleges azonban az, hogy itt nem a globális dokumentumról van szó, hanem arról, melyet a layer biztosít a számunkra : document.sajat.document

left

Megadja a bal felső sarok relativ távolságát pixelben(bal érték), melyet az előtérben lévő layerhoz ill. dokumentumhoz viszonyít. Az abszolút megadáshoz lásd : pageX.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="elso" left=100>
 <layer name="hatso" left=200 width=300 bgcolor=#FFFFE0>
 <a href="javascript:alert
   (document.elso.document.hatso.left)">Bal érték?</a>
 </layer>
</layer>
</body></html>

Magyarázat:

A példában egy réteget mutatunk hatso neven, mely az előtérben lévő layer 200. pixelénél kezdődően egy hivatkozást mutat. Ha erre rákattintunk akkor az kiírja a bal értéket 200-ra, holott a képernyőn 300-nak látszik. Ez azért van, mert a felette levő réteg bal értéke 100 pixel.

length

Magadja a HTML fájlban levő rétegek számát.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer></layer>
<layer></layer>
<layer></layer>
<layer></layer>
<script language="JavaScript">
 document.write
("Ezen az oldalon : " + document.layers.length + " réteg van");
</script>
</body></html>

name

Megadja a réteg nevét.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="akarmi" bgcolor=#FFFFE0>
<a href="javascript:alert(document.akarmi.name)">Hogy hívnak?</a>
</layer>
</body></html>

pageX

Megadja a bal felső sarok abszolút távolságát vízszintesen mérve, pixelben. A viszonyítási pont mindig a globális dokument, még akkor is, ha az egy másik dokumentumban van megjelenítve.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function balra() {
   document.valami.pageX = 0;
  }
</script>
</head><body>
<layer name="valami" left=300 width=300 bgcolor=#FFFFE0>
<a href="javascript:balra()">Balra ezzel a layer-ral</a>
</layer>
</body></html>

Magyarázat:

Ha a példában lévő hívatkozásra kattintunk, akkor az a réteg bal értékét 0-ra csökkenti, tehát a layer (és a rajta levő objektum) elugrik balra.

pageY

Megadja a layer bal felső sarok abszolút távolságát függőlegesen mérve, pixelben. A viszonyítási pont mindig a globális dokument, még akkor is, ha az egy másik dokumentumban van megjelenítve.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function fel()  {
   document.valami.pageY = 0;
  }
</script>
</head><body>
<layer name="valami" top=300 width=300 bgcolor=#FFFFE0>
<a href="javascript:fel()">Fel ezzel a layer-ral</a>
</layer>
</body></html>

Magyarázat:

Ha a példában lévő hívatkozásra kattintunk, akkor az a réteg függőleges értékét 0-ra csökkenti, tehát a layer felfelé ugrik.

parentLayer

Megadja a layer szülő objektumát, mely lehet a window objektum vagy egy másik felérendelt layer.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
</script>
</head><body>
<layer name="apa">
<layer name="fia" bgcolor=#FFFFE0>
<a href="javascript:alert
(document.apa.document.fia.parentLayer.name)">Szülő réteg neve?</a>
</layer>
</layer>
</body></html>

siblingAbove

Annak a felette fekvő rétegnek a tulajdonságait és metódusait érhejük el általa, mellyel közös szülője van és a z-index= által meghatározott. Ha layerunk legfelül van az értéke : NULL

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="L1" left=100 top=100 z-index=3>L1 réteg tartalma</layer> 
<layer name="L2" left=120 top=120 z-index=1>L2 réteg tartalma</layer> 
<layer name="L3" left=140 top=140 z-index=4>L3 réteg tartalma</layer> 
<layer name="L4" left=160 top=160 z-index=2>L4 réteg tartalma</layer> 
<layer name="L5" left=100 top=180 bgcolor=#FFE0FF>
<a href="javascript:alert(document.L1.siblingAbove.name)">L1hív</a><br>
<a href="javascript:alert(document.L2.siblingAbove.name)">L2hív</a><br>
<a href="javascript:alert(document.L3.siblingAbove.name)">L3hív</a><br>
<a href="javascript:alert(document.L4.siblingAbove.name)">L4hív</a><br>
</layer>
</body></html>

Magyarázat:

A példában összesen öt réteget definiáltunk. Az utoljára definiált rétegen négy hivatkozás van. Minden hivatkozás annak a rétegnek nevét írja ki az üzenőablakban, melyre a réteg z-indexe mutat.

siblingBelow

Annak az alatta levő rétegnek a tulajdonságait és metódusait érhejük el általa, mellyel közös szülője van és a z-index= által meghatározott. Ha layerunk legalul van az értéke : NULL

src

Megadja a külső HTML fájl nevét, mely az adott réteghez hozzá van rendelve, így annak tartalmát képezi.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="kulso"
 left=50 top=30 width=600 height=200 src="ujsag.htm">
</layer> 
<layer left=50 top=250>
<script language="JavaScript">
document.write("<hr><b>Külső fájl: </b>" + window.document.kulso.src);
</script>
</layer>
</body></html>

Magyarázat:

A példában két réteget mutatunk, ahol az első réteg tartalma egy külső fájl : ujsag.htm A második rétegben a document write() metódus hívásával kiiratjuk a a külső fájl nevét a következő módon : window.document.extern.src

top

Megadja a layer bal felső sarok távolságát a fölérendelt dokumentumhoz képest, függőlegesen mérve, pixelben. Az abszolut címzéshez lásd : pageY.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="apa" top=100>
<layer name="fia" top=200 width=300 bgcolor=#FFFFE0>
<a href="javascript:alert
(document.apa.document.fia.top)">Felső érték?</a>
</layer>
</layer>
</body></html>

visibility

Meghatározza, hogy a réteg látható-e vagy sem. Így a "hide" karakterlánc jelzi, hogy a réteg nem látható, "show" annyit tesz, hogy látható. Lehetséges még egy harmadik érték is : "inherit" azaz, szülőtöl örökölt .

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function valt(szam)  {
   if(window.document.layers[szam].visibility == "show")
    { window.document.layers[szam].visibility = "hide"; return; }
   if(window.document.layers[szam].visibility == "hide")
    { window.document.layers[szam].visibility = "show"; return; }
 }
</script>
</head><body>
<layer name="sarga" left=50 top=30 width=200 height=200
       visibility=show bgcolor=#FFFFE0>
    <a href="javascript:valt(1)">Látható : Ki/Be</a>
</layer>
<layer name="lila" left=250 top=30 width=200 height=200
       visibility=show bgcolor=#FFE0FF>
<a href="javascript:valt(0)">Látható : Ki/Be</a>
</body></html>

Magyarázat:

A példában két réteget definiáltunk. Mindkettőn van egy hivatkozás, melyre ha rákattintunk, akkor a másik réteg lesz látható.

zIndex

Meghatározza a layer objektum rétegpozicióját.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="akarmi" bgcolor=#FFFFE0 z-index=66>
<a href="javascript:alert(document.akarmi.zIndex)">Mi a z-indexed?</a>
</layer>
</body></html>

captureEvents()

A rétegre vonatkozó események figyelését végzi. Úgy működik, mint a window captureEvents() esetében, de nem az egész kijelzőterületre vonatkoztatva. Meghívása a következő módon történik: window.document.layer_neve.caputeEvents()

handleEvent()

Továbbadja az eseményt egy olyan elemnek, mely képes azt feldolgozni. Ez a metódus is csak a layer objektumokra vonatkozó eseményeket kezeli, adja tovább. Úgy működik, mint a window handleEvent() metódusa. Meghívása : window.document.layer_neve.handleEvent()

load()

A réteg tartalmaként megad egy külső állományt. Két paramétert vár:
1. forrás = Egy HTML fájl, melyet be kívánunk tölteni.
2. Szélesség = A layer megjelenési szélessége.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function betolt()  {
   document.layer_neve.load("ujsag.htm",600);
  }
</script>
</head><body>
<a href="javascript:betolt()">Ujság betöltése</a>
<layer name="layer_neve" top=50 left=20>
"/layer"
</body></html>

moveAbove()

Az egyik réteget a másik fölé helyezi. Paraméterként azt a layert várja, melyet le akarunk fedni. Ezáltal csak a rétegpozició változik, maga a layer nem mozog.

Példa:

<html><head><title>Teszt</title>
</head><body>
<layer name="sarga" 
top=150 left=100 width=200 height=200 bgColor=#FFFFE0>
Sárga réteg tartalma <br>
<a href=
"javascript:window.document.sarga.moveAbove(window.document.lila)">
Előtérbe helyezi a réteget</a>
</layer>
<layer name="lila"
top=50 left=250 width=200 height=200 bgColor=#FFE0FF>
Lila réteg tartalma<br>
<a href=
"javascript:window.document.lila.moveAbove(window.document.sarga)">
Előtérbe helyezi a réteget</a>
</layer>
</body></html>

Magyarázat:

A példában két layert definiáltunk. Ha a hívatkozásra kattintunk, akkor a másik kerül előtérbe.

moveBelow()

Az egyik réteget a másik alá helyezi. Paraméterként azt a layert várja, mellyel az aktuálist le akarjuk fedni. Ezáltal csak a rétegpozició változik, maga a layer nem mozog.

moveBy()

Eltolja a réteget a paraméterként átadott x és y értékkel, ahol :
1. x-érték = a negatív érték balra, a pozitív jobbra mozdítást jelent (pixelben megadva).
2. y-érték = a negatív érték fel, a pozitív lefelé mozdítást jelent (pixelben megadva).

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function ugrani()  {
   x = eval(document.ugro.document.urlap.hr.value);
   y = eval(document.ugro.document.urlap.vr.value);
   document.ugro.moveBy(x,y);
  }
</script>
</head><body>
<layer name="ugro"
 top=150 left=100 width=200 height=200 bgColor=#FFFFE0>
<form name="urlap">
Ugorj <input size=5 name="hr"> pixelt vizszintesen<br>
Ugorj <input size=5 name="vr"> pixelt függőlegesen<br>
<input type=button value="Ugrás" onClick="ugrani()">
</form>
</body></html>

Magyarázat:

A példában egy layert definiáltunk, melyen egy űrlap van. Azon két beviteli mező és egy nyomógomb. A gomb megnyomásával a beviteli mező értékeinek megfelelően mozgatjuk a layert. Az eval() metódus segítségével alakítjuk át a karakterláncot numerikus értékké, mivel a moveBy() számot vár, mely aztán mozgatja a réteget : le/fel és jobbra/ballra.

moveTo()

A megadott relatív pozicióba helyezi a réteget. Két paramétert vár ::
1. x-érték = Bal érték az ablak bal felső sarka számára (pixelben megadva)
2. y-érték = Felső érték az ablak bal felső sarka számára (pixelben megadva)

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function ugrani()  {
   x = eval(document.ugro.document.urlap.hr.value);
   y = eval(document.ugro.document.urlap.vr.value);
   document.ugro.moveTo(x,y);
  }
</script>
</head><body>
<layer name="ugro"
 top=150 left=100 width=200 height=200 bgColor=#FFFFE0>
<form name="urlap">
Bal felső sarok új   bal értéke : <input size=5 name="hr"><br>
Bal felső sarok új felső értéke : <input size=5 name="vr"><br>
<input type=button value="Ugorj" onClick="ugrani()">
</form>
</body></html>

Magyarázat:

A példában egy layert definiáltunk, melyen egy űrlap van. Azon két beviteli mező és egy nyomógomb. A gomb megnyomásával a beviteli mező értékeinek megfelelően mozgatjuk a layert. Az eval() metódus segítségével alakítjuk át a karakterláncot numerikus értékké, mivel a moveTo() számot vár, melybe aztán elmozgatja a réteget.

Figyelje meg:

Ha a layer, mely a moveTo() metódust hívja, maga is egy másik layer-on található, akkor a mozgatás a külső réteghez viszonyul (relatív érték).

moveToAbsolute()

Ez a metódus ugyanúgy működik, mint a moveTo(), csak azzal a különbséggel, hogy itt a kijelzőablak abszolut koordinátáit adjuk át x és y paraméterként.

releaseEvents()

Befejezi az eseményfigyelést. Ez a metódus is csak a layer objektumokra vonatkozó eseményeket kezelte. Úgy működik, mint a window releaseEvent() metódusa. Meghívása : window.document.layer_neve.releaseEvent()

resizeBy()

Újraméretezi a layert a paraméterként átadott érétékekkel :
1. x-érték = a jobb alsó sarok jobb értékét módosítja. A negatív érték csökkenést, a pozitív növekedést okoz.
2. y-érték = a jobb alsó sarok alsó értékét módosítja. A negatív érték csökkenést, a pozitív növekedést okoz.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function kicsinyit() {
 document.proba.resizeBy(-20,-10);
}
function nagyit() {
 document.proba.resizeBy(20,10);
}
</script>
</head><body>
<layer name="proba"
 top=50 left=50 width=200 height=100 bgColor=#FFFFE0>
<a href=javascript:"kicsinyit()">Kicsinyítés</a><br>
<a href=javascript:"nagyit()">Nagyítás</a><br>
</layer>
</body></html>

Magyarázat:

A példában egy réteget definiáltunk, melyen két hivatkozás található. Ha ezek valamelyikére rákattintunk, akkor az a layer látható részét ujraméretezi 20 ill.10 pixellel.

resizeTo()

A layer szélességét és magasságát beállítja a paraméterként átadott értkekre, ahol :
1. x-érték = a layer új szélessége.
2. y-érték = a layer új magassága.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
  function beallit() {
   x = eval(document.proba.document.urlap.hr.value);
   y = eval(document.proba.document.urlap.vr.value);
   document.proba.resizeTo(x,y);
  }
</script>
</head><body>
<layer name="proba" top=50 left=50 width=200 height=200 >
<form name="urlap">
neue <input size=5 name="hr"> Szélesség<br>
neue <input size=5 name="vr"> Magasság<br>
<input type=button value="Beállít" onClick="beallit()">
</form>
</body></html>

Magyarázat:

A példában egy réteget definiáltunk, melyen egy űrlap, két beviteli mező és egy nyomógomb látható. Ha rákattintunk a nyomógombra, akkor az ujraméretezi a layert a beviteli mező értékének megfelelően. Az eval() metódus segítségével alakítjuk át a karakterláncot számmá, mivel a resizeTo() számot vár.

routeEvent()

Továbbadja a eseményt a document objektumnak, ahonnan aztán mind lejjeb kerül, mindaddig míg egy olyan objektumhoz nem jut, mely képes azt feldolgozni. Pont úgy működik, mint a window routeEvent() metódusa. Meghívása : window.document.layer_neve.routeEvent().

Készült : 1999-08-31. Lengyel Sándor