Kattintásra mozgatható réteg 1311
Megjegyzés:
- Ha nem írunk CSS, azaz stílus meghatározást a mozgó objektumhoz, akkor az meg sem jelenik
- Ha a CSS fájlban top meghatározást alkalmazunk, akkor a js fájlban is top legyen.
- Ha a CSS fájlban margin-top meghatározást alkalmazunk, akkor a js fájlban marginTop legyen
- Ismétlődést, vezérlő utasítást, ne a js programunk végén, hanem közvetlen az if utasításban helyezzük el.
- Az else utasítás, elhagyható
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';
Ezen oldalon a réteg, autómatikusan a következő irányokban fog mozogni: Le vagy Fel
A mozgási irányt, vezérelhetjük button gombokkal, vagy hivatkozásokkal (horgony a)
A példánkban mindkettő szerepel, de a valóságban lehetőleg csak az egyik variációt alkalmazzuk
Ez egy mozgatható objektum.
Kezdeti pozíciója
bal felső sarok "x" és "y" értéke
Vezérlés: Button gombok alkalmazásával
_______________
Vezérlés: Hivatkozások alkalmazásával
Le ________ | ________
Fel
Programunk megírása XHTML fájlban
<body>
//Első lehetőség, button gombokkal történő vezérlés.
<p> <u>Button gombok</u> <br />
<button onClick="pozicioLe();"> Le</button> _______________
<button onClick="pozicioFel();"> Fel</button>
</p>
//Második lehetőség, hivatkozásokkal történő vezérlés
<p> <u>Hivatkozások</u> <br />
<a href="#.html" onClick="pozicioLe();"> Le</a> ________ | ________
<a href="#.html" onClick="pozicioFel();"> Fel</a>
</p>
<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>
</body>
Stílusok meghatározása CSS fájlban:
#mozog{ position: absolute; margin-top: 10px; margin-left: 350px; width: 300px; border: 2px solid black; padding: 10px; background-color: #E3E3E3; }
JavaScript, azaz js fájlunk programja:
var le=0;
var fel=0;
var y=10;
var x=350;
function pozicioLe() {
obj = document.getElementById ("mozog");
obj.style.marginTop=y+'px';
obj.style.marginLeft=x+'px';
if (le<=15) { le++;
y=y+le;
fel=0;
retegle=window.setTimeout("pozicioLe(); " , 40) ;
}
}
function pozicioFel() {
obj = document.getElementById ("mozog");
obj.style.marginTop=y+'px';
obj.style.marginLeft=x+'px';
if (fel<=15) { fel++;
y=y-fel;
le=0;
retegfel=window.setTimeout("pozicioFel(); " , 40) ;
}
}
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.