TÖBB KÉP EGY OLDALON

Egy oldalon több kép is elhelyezhető. Egy programozó azonban nem elégszik meg azzal, hogy egy oldalon, egymás mellé, mozaikszerűen több kisebb képet tesz fel. A képeket minél nagyobb méretben szeretnénk látni, lehetőleg egyszerre csak egyet, és az interaktivitás szabályai szerint, a nézőnek kell kiválasztania, melyik képet jeleníti meg.

A "SHOW" ÉS A "HIDE" PARANCS

Lépjünk az Oldal3 oldalra! Ehhez el kell mentenünk az Oldal2 oldal változásait. Az új oldal tetejére helyezzünk el egy címkét "TÖBB KÉP AZ OLDALON" tartalommal!.
Ezután az előbb megismert módszerrel szúrjunk be 3 képet egymás fölé az oldalon! Legyenek ezek a következők: farkas.bmp, szocsi.bmp, szita.bmp. A képeket méretezzük aránytartással a lehető legnagyobbra!
Ezután helyezzünk el a képek alatt 3 cimkét "FARKAS", "SZÖCSKE", "SZITAKÖTŐ" tartalommal!
Készítsünk egy programot, amellyel a címkére kattintva csak a megfelelő kép jelenik meg az oldalon!

Azt szeretnénk tehát, hogyha a "FARKAS" cimkére kattintunk, a farkas képe jelenjen meg. Ezért a cimkéhez eseményt kell hozzárendelni.

Jelöljük ki a "FARKAS" cimkét! A megfelelő cimke az Elemlistában is kijelölődik. Ezután az Esemény listában kattintsunk az OnClick eseményre. Ide programozzuk, mi történjen, akkor, ha a Cimke2 elemre kattintunk.

A Cimke2 Eseményszerkesztő ablakába a Proc és az EndProc közti programozóterületre írjuk be az utasításainkat.
A Lapodában az utasítások úgy működnek, hogy megadjuk az elem nevét, majd tőle ponttal elválasztva, de szóköz nélkül beírjuk a parancsot.

SHOW parancs = az elemet megjeleníti
HIDE parancs = az elemet elrejti

Értelemszerűen arra a képre adjuk ki a SHOW parancsot, amelyen a farkas található, a másik kettőt el kell rejtenünk. Az Eseményszerkesztő ablakban tehát így néz ki a Cimke2-höz tartozó programrészlet:

Hasonlóképpen írjuk meg a Cimke3 és a Cimke4 programját: mindig egy megfelelő képet megjelenítünk, míg a másik kettőt eltüntetjük.

Jó tudni: ha a megjelölt elem létezik az oldalon, a nép beírásakor az barnára változik. Ha az elem neve nem változtat színt, vagy nem létezik az oldalon, vagy elírtuk a nevét.

A programok elkészülte után a zöld pipára kattintva fogadjuk el, mentsük a Változások mentése gombbal az oldalt.

Programozásunknak akkor lesz értelme, ha az oldal megnyitásakor azon még egyetlen kép sem fog látszani. Ez úgy érjük el, hogy a Kép1, Kép2 és Kép3 elem tulajdonságai beállításánál a Látható jelölő mezőből kivesszük a pipát.

AZ OLDAL MŰKÖDÉSÉNEK ELLENŐRZÉSE

Ehhez az Oldal próba gyorsító gombra kell kattintanunk.
A próbából úgy térünk vissza,hogy az Oldal próba gomb bal oldalán levő Szerkesztés gombra kattintunk.

A "FILENAME" PARANCS

Több kép tetszés szerinti megjelenítését elegánsabban oldhatjuk meg a "filename" parancs alkalmazásával. Ekkor egyetlen üres képelemet helyezünk az oldalra, melynek beállításaiban az "Auto méret" opciót pipáljuk be. Ekkor az eredeti méretben jelenik meg a kép. Ha a kép túl nagy, vagy túl kicsi, méretezzük át pl. Az XnView programmal.

Készítsünk egy listát cimke elemekből, amely tartalmazza a megjelenítendő képek nevét!

Célunk, hogy a megfelelő cimkére rákattintva, a megfelelő kép jelenjen meg a Kép1 elem most még üres keretében. A "Farkas" elem programja így néz ki:

A filename parancs után = jel van, melyet követően idézőjelbe kell beírni a kép teljes elérési útját: a farkas.bmp kép a Lapoda könyv mappájába bemásolt kepek mappában található. Figyelj a pontos mappa és fájlnévre, az idézőjel bezárására!

Ennek alapján írjuk be a Szöcske és az Ürge cimkék parancsát is:

Mentés után próbáljuk ki az oldal futását!

Megjegyzés: Saját képek, vagy letöltött képek esetén érdemes a képeket a kepek mappába menteni, rövid nevet adni nekik, hogy a programozás közben egyszerűbb dolgunk legyen. Figyeljünk, hogy a megfelelő képfájlnév-kiterjesztést használjuk (jpg képeknél .jpg-t. A program nem kezeli a .jpeg kiterjesztésű állományokat!)