A bemutatandó képek megkeresése class osztályazonosítójuk alapján

A bemutatóhoz készített képek.
A weboldalon így jelennek meg, JavaScript program nélkül.

A JavaScript program segédletével.
A weboldalon így jelennek meg, a képek.
Az elsőt kivéve, többi el van rejtve.
A következő kép akkor jelenik meg, ha az éppen látható képre kattintunk.

 

---

További képek megtekintéséhez, kattintsunk a következő képre. Öt kép, azaz dia kerül bemutatásra.

---

 

Ha bemutatót készítünk képeinkből.
Azokat, helyezzük el egy div szakaszban (id vagy class azonosítóval, ez tetszőleges lehet). Így a képek weblapunkon, általunk meghatározott pozícióban jelennek meg.

 

 

Következő megoldás, nem ajánlott képek bemutatásához.
De szórakozásnak megteszi, a következő címmel: Mond meg előre, hól jelenik meg a következő kép.
JavaScript programunk akkor is begyűjti a képeket, ha azokat dokumentumunk szövegfolyamában helyezzük el, tetszőleges helyen.
Ekkor is, kezdetben csak az első lesz látható, a többi nem.
Ha rákattintunk a képre, az eltűnik, majd a következő kép, ott jelenik meg weboldalunkon, ahol a dokumentum szövegfolyamában elhelyeztük, és így tovább.

Megjegyzés:
Továbbá, de nem ajánlott.
JavaScript programunkat tetszőleges jelölőelemekhez (címkékhez) alkalmazhatjuk, melyek class osztályazonosítóval rendelkeznek XHTML fájlunkban, ha js fájlban megadjuk:
document .getElementsByTagName ("img") utasításban, a jelölőelem (címke) típusát
.className != "kep" utasításban, a jelölőelem (címke) class osztályazonosítóját.

A képek megjelenítéséhez három fájlt készítünk:
• html fájl, melyben megírjuk egy adott div szakaszban a képbehívó utasításokat.
• JavaSkript fájl, mely váltogatja a képeket, és megjeleníti olyan sorrendben, ahogy azt a html lapon megírtuk.
• css fájl, mely a div szakasz azonosítójához megírt meghatározások alapján, weblapunk adott területére mozgatja a div szakaszt és vele együtt a képeket is.

Kép, azaz diabemutató ismertetése.

Ha a html programot azelőtt töltjük be, hogy elkészítenénk a JavaScrip fájlt, az oldalon mind az öt kép megjelenik.
A JavaScript program azokat a jelölőelemeket keresi, melyek class osztályazonosítója megegyezik a JS programunkba beírt azonosítóval.
Így különbözteti meg azon képektől, melyek más osztályazonosítóval rendelkeznek, azaz nem a bemutatóhoz tartoznak.
Képek, azaz diák, olyan sorrendben jelennek meg, ahogy azt, a html lapon megírtuk.

Az XHTML fájl, képeket tartalmazó része

<div id="kepek">
<img class="kep" src="kep1.jpg" width="70" height="50" />
<img class="kep" src="kep2.jpg" width="70" height="50" />
<img class="kep" src="kep3.jpg" width="70" height="50" />
<img class="kep" src="kep4.jpg" width="70" height="50" />
<img class="kep" src="kep5.jpg" width="70" height="50" />
</div>

JavaScrip programja

Megjegyzés
A sárga háttérszínnel jelölt részre kell beírni, azon jelölőelem típusát, melyet keresünk
A zöld háttérszínnel jelölt részre kell beírni, keresett jelölőelemek class osztályazonosítójának nevét.
A kék színnel jelölt szöveg helyére is tetszőleges változó elnevezés írható, változó elnevezéseknek (betű vagy szöveg) egyformának kell lenni.

var elemszama=0, megjelenitendo_elem=0;

var megtalaltelem=new Array( ) ; //megtalaltelem a tömb elnevezése, mely helyett tetszőleges név adható

function ElemMegjelenitesBemutato( ) {

// megkeresünk minden, kep, class osztályazonositóval rendelkező képet, azaz elemet
elemek=document .getElementsByTagName ("img") ; //keresett címke, azaz elem típusát írjuk be
for (i=0 ; i<elemek.length; i++) {
if ( elemek [ i ] .className != "kep") continue ; //keresett elem class osztályazonositójának neve: ("kep")
megtalaltelem [elemszama]=elemek [ i ];

// az első kivételével elrejtünk minden képet
if (elemszama==0) {
elemek [ i ].style,display="block" ;
} else {
elemek [ i ].style.display="none" ;
}

elemek [ i ].onclick=KovetkezoElemMegjelenitese ;
elemszama++ ;

} // a for ciklus vége
} // ElemMegjelenitesBemutato ( ) vége

function KovetkezoElemMegjelenitese ( ) {
megtalaltelem [megjelenitendo_elem].style.display="none";
megjelenitendo_elem++ ;
if (megjelenitendo_elem >= elemszama) megjelenitendo_elem=0; //Nem 0-ázzuk le, bemutatónak vége, nincs ismétlés
megtalaltelem [megjelenitendo_elem] .style.display="block" ;
}

// Bemutató létrehozása az oldal betöltésekor. Azon function elnevezést írjuk be, melyet működtetni akarunk
window.onload=ElemMegjelenitesBemutato ;

JavaScript.
Az ElemMegjelenitesBemutato() Azon funkció elnevezése, mely tárolja a kiválasztott jelölőelemeket.
A KovetkezoElemMegjelenitese() funkció,a kattintásokra reagál, és a megjelenítendő jeölőelemet tartalmát, az előzőre helyezi.

A program első sorai, három globális változót határoznak meg:

• elemszama: A képek, azaz diák aktuális számát tárolja.
• megjelenitendo_elem: Az aktuális képet, azaz diát tárolja.
• megtalaltelem: Tömb elnevezése. Az azonos típusú és azonos osztályazonosítóval rendelekző jelölőelemeket (objektumot) tárolja.

A ElemMegjelenitesBemutato() függvény a getElementsByTagName () segítségével megkeresi az összes képet, majd egy for ciklussal bejárja a tömböt.
A ciklus első if utasítása, megvizsgálja a kép className jellemzőjét, és ha a kép nem a kepclass osztályba tartozik, a ciklus békén hagyja, és továbblép.

className jellemző: A képhez rendelt egyedi azonosító név, mely a class osztályazonosítóhoz van rendelve.
Jelen esetben html - lapunkon az img, azaz minden kép a kep azonosító elnevezést kapta.

Következő utasítások,az általunk meghatározott jelölőelemeket, a megtalaltelem tömbbe helyezik.
Majd megnézi, hogy az elemszama értéke nulla-e, ami az első jelölőelemet jelenti, a tömbben.
Az első jelölőelem display jellemzőjét block-ra állítja, a többiét pedig none-ra.
Így, egyszerre csak egy, jelölőelem (objektum) tartalma lesz látható.

A ciklus utolsó utasítása, a jelölőelem onclick eseménykezelőjeként meghívja a KovetkezoElemMegjelenitese() függvényt, és növeli a elemszama változó értékét.

A KovetkezoElemMegjelenitese() függvény először elrejti az aktuális jelölőelemet, a jelölőelem display tulajdonságának none-re állításával, majd növeli a megjelenitendo_elem értékét.
Amikor az utolsó jelölőelemre (objektumra) kattintunk, az if utasítás visszaállítja a megjelenitendo_elem értékét nullára.
Az új jelölőelem (objektum) megjelenítése, a display tulajdonság block-ra állításával történik.

A program utolsó sora az ablak onLoad eseménykezelőjeként beállítja a ElemMegjelenitesBemutato() függvényt, hogy az, az oldal betöltésekor lefusson, és nyomban diabemutató formátumba rendezze a jelölőelemeket (objektumokat).

Megjegyzés:
Az oldal betöltésekor:
- Engedélyezni kell a JavaScript működését, melyre egy figyelmeztetés jelenik meg.
- Rövid felvillanást láthatunk, és mind az öt kép megjelenhet, mielőtt a program elrejtené azokat.
Ezt, kiküszöbölhetjük a stíluslapon, ha a jelölőelem osztályazonosítójához adjuk, a display: none CSS szabályt.
Így, minden általunk meghatározott jelölőelem (objektum) tartalma láthatatlan marad, amíg a program meg nem jeleníti az első jelölőelem (objektum) tartalmát.

 

 

 

 

Vissza a lap elejére