JavaScript Z-index 030
index 0
Figyeljük meg!
A JavaScript:
- Olyan sorrendben indexeli a div szakaszokat, ahogyan azokat beírtuk a szövegfolyamba.
- A legkisebb sorszámút helyezi felülre, a legnagyobbat alulra.
Összegezve: Fordított sorrendet alkalmaz, mint amikor mi határozzuk meg az index értéket.
Továbblépéshez, kattints ezen terület bármely részére!
index 1
<div id="pozicio">
<div class="indexelt"> <p> szöveg, kép, stb. helye.</p> </div>
<div class="indexelt"> <p> szöveg, kép, stb. helye.</p> </div>
<div class="indexelt"> <p> szöveg, kép, stb. helye.</p> </div>
<div class="indexelt"> <p> szöveg, kép, stb. helye.</p> </div>
<div class="indexelt"> <p> szöveg, kép, stb. helye.</p> </div>
</div>
Továbblépéshez, kattints ezen terület bármely részére!
index 2
Pozícionáló div szakasz.
Ezzel határozzuk meg, hogy weboldalunkon hól jelenjenek meg, az indexelt div szakaszok.
Stílusának meghatározása:
#pozicio {pozition: absolute; width:650px; height:350px; margin-left:100px;}
Továbblépéshez, kattints ezen terület bármely részére!
index 3
Indexelendő div szakaszok.
Azonosítojukat, class osztályazonosítohoz rendeljük
Stílusuk meghatározása:
.indexelt {width:600px; height:300px; margin-left: 15px; margin-top: 15px; padding: 5px;}
Megjegyzés:
Ha mindegyiknek más háttérszínt akarunk adni, akkor a stílust írjuk be közvetlen a kezdő div címkébe.
Példa: <div class="indexelt" style="background-color: orange;">
Továbblépéshez, kattints ezen terület bármely részére!
index 4
V É G E !
Újrakezdéshez, kattints ezen terület bármely részére!
V É G E !
Újrakezdéshez, kattints ezen terület bármely részére!
Kattints az indexelt területre! Minden kattintás után, másik div szakasz jelenik meg.
A div szakaszok indexelését, JavaScript program végzi el helyettünk
Mennyi div szakasz jelenik meg, egymás után?
- Számuk korlátlan.
- Ez attól függ, hogy a weblap készítője, mennyi azonos class osztályazonosítoval rendelkező div szakaszt írt be, a HTML oldalon.
<head> <title> JavaScript index </title>
<script type="text/javascript">
//Jelölőelemek indexelt sorszáma=jelemsszam Nézett jelölőelem sorszáma= nezettjelem
var jelemsszam=0, nezettjelem=0;
// Létrehozunk egy tömböt, mely tárolja azon jelölőelemeket, melyek class osztályazonosítója megegyezik az általunk megadottal.
var indexelt=new Array( ) ;
//Kiválasztott jelölőelemek bemutatása dia formátumban=JelemBemutoDia
function JelemBemutoDia( ) {
// megkeressük a megadott tipusú jelölőelemeket röviditve=jelem
jelem=document .getElementsByTagName ("div") ;
//kiválogatjuk azon tipusú jelölőelemeket, melyek class osztályazonosítója = slide=indexelt
for (i=0 ; i < jelem.length; i++) {
if ( jelem [ i ] .className != "indexelt") continue ;
indexelt [jelemsszam]=jelem [ i ];
//A találtak közül, az első kivételével, elrejtünk minden más jelölőelemet, tartalmával együtt.
if (jelemsszam==0) {
jelem [ i ].style,display="block" ;
}
else {
jelem [ i ].style.display="none" ;
}
//Az éppen aktuális jelölőelem tartalma, ez van felül, azaz látható= FelsoJelem
jelem [ i ].onclick=FelsoJelem ;
jelemsszam++ ;
} // a for ciklus vége
} // a JelemBemutoDia ( ) vége
function FelsoJelem ( ) {
indexelt [nezettjelem].style.display="none";
nezettjelem++ ;
if (nezettjelem >= jelemsszam) nezettjelem=0;
indexelt [nezettjelem] .style.display="block" ;
}
// a bemutató létrehozása az oldal betöltésekor
window.onload=JelemBemutoDia ;
</script>
</head>
<body>
Amit ide kell beírni, megtalálható a fent látható indexelt div szakaszoknál.
Megtekintéséhez kattintsunk az indexelt ablak tetszőleges területére.
</body>