Mozgatható réteg terület 1309
Ezen oldalon adott objektumot, azaz réteget, a következő irányokban fogjuk mozgatni:
- Le
- Jobbra le
- Balra le
- Fel
- Jobbra fel
- Balra fel
Mozgatáshoz, kattints a vezérlő gombokra.
Ez egy mozgatható objektum.
Kezdeti pozíciója,
bal felső sarok = "x" és "y" értéke
Megjegyzés:
Oldalra történő belépéskor vagy frissítéskor, azon pozícióban jelenik meg objektumunk, melyet a stílus meghatározásakor megadtunk.
Bármelyik mozgási irányt meghatározó gombra is kattintunk, első lépésként felveszi azon pozíciót, melyet a JavaScript programunkban kezdeti értéknek megadtunk.
Pozíciók megadását legtöbbször, "px" méretben határozzuk meg. Amikor JavaSript meghatározza pozíció értékét, akkor az értékhez hozzá kell rendelni a 'px' karaktereket. Példa: var a=15; objekt.style.width=a+'px';
Programunk megírása XHTML fájlban
<body>
<form name="form1" id="form1">
<input type="button" name="le" value=" Le " onClick="pozicio(0, 1) ;">
<input type="button" name="J_le" value="Jobbra-Le" onClick="pozicio(1,1) ;">
<input type="button" name="B_le" value="Balra-Le" onClick="pozicio(-1, 1) ;"> <br /> <br />
<input type="button" name="fel" value=" Fel " onClick="pozicio(0, -1) ;">
<input type="button" name="J_fel" value="Jobbra-Fel" onClick="pozicio(1, -1) ;">
<input type="button" name="B_fel" value="Balra-Fel" onClick="pozicio(-1, -1) ;">
</form>
<div id="mozog">
<p>Ez egy mozgatható objektum.</p>
<p>Kezdeti pozíciója</p>
<p>bal felső sarok "x" és "y" értéke</p>
</div> <br> <br> <br> <br> <br>
</body>
Stílusok meghatározása CSS fájlban:
#mozog { position: absolute; margin-top: 20px; margin-left: 350px; width: 300px; border: 2px solid black; padding: 10px; background-color: #E3E3E3; }
JavaScript, azaz js fájlunk programja:
// Kezdő style érték : #mozgas { position: absolute; margin-top: 20px; margin-left: 350px;}
var y=20; // Függőleges mozgatás.
var x=350; // Vízszintes mozgatás.
//Az "nx" és "ny" felveszi azon értéket, melyet az onClick="pozicio(.. , ..) zárójelei között meghatároztunk
function pozicio (nx, ny ) {
if (!document.getElementById) return;
//Az elmozdulási értéket megsokszorozhatjuk, ha "nx" és "ny" értéket tetszőleges számmal megszorozzuk.
x += 10*nx;
y += 10*ny;
//Elmozdulás azon rétegre lesz hatással, melynek egyedi azonosítóját beírjuk a zárójelek közé.
obj = document.getElementById ("mozog");
obj.style.marginTop=y+'px';
obj.style.marginLeft=x+'px';
}
Rétegek között elhelyezkedő elemek
A weblapok minden elemét vezérelhetjük, minden elemet tetszőleges pozícióba helyezhetünk.
A HTML objektumok csoportjai rétegeket alkotnak, ezeket külön egységként kezelünk.
Egyedi rétegeket is létrehozhatunk a <div> és a <span> elemekkel.
De önmagukban a html oldalon, semmi formázási hatásuk sincs, a bennük elhelyezkedő szövegrészre.
A span egy tetszőleges részt jelöl ki a html dokumentumban.
A div is hasonlóan jár el, de ez egy sortörést helyez el a tartalmi része előtt és után.
Ahhoz, hogy ezen rétegelemekben megjelenő szövegrész megjelenési formájára hatással legyünk, megtehetjük CSS, azaz stílus fájlban vagy JavaSripttel.
Ennek feltétele, hogy azonosítót rendeljünk hozzájuk.
CSS, azaz stílusfájl, elfogadja az id egyedi azonosítót vagy class osztályazonosítót, de a JavaScript az id egyedi azonosítót veszi figyelembe.