Mozgatható réteg 1308
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: #mozog { position: absolute; margin-top: 20px; margin-left: 350px; width: 300px; }
Ez egy mozgatható objektum.
Ez egy mozgatható objektum.
Ez egy mozgatható objektum.
Programunk megírása XHTML fájlban
<head>
<title>Mozgatható réteg.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script language="JavaScript" type="text/javascript" src="mozgatas.js"> </script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="form1" id="form1">
<input type="button" name="hide" value=" Elrejt " onClick="hideElrejt(-1, 0) ;">
<input type="button" name="show" value="Látható" onClick="showLathato(-1, 0) ;">
<input type="button" name="left" value="<- Balra" onClick="pozicio(-1, 0) ;">
<input type="button" name="right" value="Jobbra ->" onClick="pozicio(1, 0) ;">
<input type="button" name="up" value=" Fel " onClick="pozicio(0, -1) ;">
<input type="button" name="down" value=" Le " onClick="pozicio(0, 1) ;">
</form>
<div id="mozog">
<p>Ez egy mozgatható objektum.</p>
<p>Ez egy mozgatható objektum.</p>
<p>Ez egy mozgatható objektum.</p>
</div> <br> <br> <br> <br> <br> <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; }
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';
JavaScript, azaz, mozgatas.js fájlunk, programja:
// Kezdő Top és Left érték, megegyezik a CSS fájlban meghatározottal.
// Top érték = y; Left érték = x;
// Kezdő értékek, melyek megegyeznek a CSS, azaz, stílus fájlban meghatározottal.
var y=20;
var x=350;
function pozicio (nx, ny ) {
if (!document.getElementById) return;
x += 10*nx;
y += 10*ny;
obj = document.getElementById ("mozog");
obj.style.marginTop=y+'px';
obj.style.marginLeft=x+'px';
}
function hideElrejt() {
if (! document.getElementById) return;
obj = document.getElementById("mozog");
obj.style.display="none";
}
function showLathato() {
if (! document.getElementById) return;
obj = document.getElementById("mozog");
obj.style.display="block";
}
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.