A képek kezelése

A képeket a JavaScript Image (kép) objektumán keresztül kezelhetjük. Ez az objektum a JavaScript 1.1-es verziója óta létezik, így csak az újabb böngészõk, pl.  Netscape Navigator 3.0-ás vagy 4.0-ás verziója (IE 4.0), vagy annál késõbbi változatok ismerik és képesek kezelni. Az Image objektum segítségével megváltoztathatjuk az oldalunkon lévõ képek paramétereit, illetve magát a képet is.

A korábbi böngészõket használók a fejezetben lévõ példákat nem fogják látni. Nekik javaslom, hogy töltsenek le, és telepítsenek egy újabb változatot.

Hogyan kezeli a JavaScript az oldalakon lévõ képeket? Minden kép egy tömbön keresztül érhetõ el. A tömböt images-nek hívják. Az oldalon lévõ képek kapnak egy sorszámot. A legelsõ kép a 0-ás sorszámmal rendelkezik, a második az 1-essel, és így tovább. Ha a legelsõ képre akarunk hívatkozni például egy JavaScript programból, akkor az a document.images[0] hivatkozáson keresztül lehetséges.

Minden képet az Image objektum egy példányának tekintünk. Az Image objektum rendelkezik bizonyos tulajdonságokkal, amikhez JavaScript programból hozzáférhetünk. Ilyen tulajdonságok például:

• name - a kép neve
• src - a kép helye, az a cím, ahonnan betöltjük
• width - szélessége (képpontokban)
• height - magassága (képpontokban)
• border - keret mérete képpontokban

Ezeket a tulajdonságokat kiolvashatjuk. Az elsõ kép szélességét például a document.images[0].width adja meg képpontokban mérve. Természetesen ha neveket adunk a különbözõ képeknek, akkor azokkal is hivatkozhatunk rájuk. Ez megkönnyíti a programozást, ha sok képet töltünk be egy oldalra. Tegyük fel, hogy egy képet töltünk be az oldalunkra az alábbi sorral:

<IMG SRC="kep.jpg" NAME="fenykep" width=150 height=200>

Ekkor a document.fenykep illetve a document.images["fenykep"] is ugyanerre a képre történõ hivatkozás.

Új képek betöltése

A leglátványosabb lehetõség azonban az, ha új képeket tölthetünk be az oldalunkra, illetve az oldalainkon lévõ képeket kicserélhetjük újakra. Ehhez a már korábban említett src attribútum szükséges. Ha ugyanis ezt megváltoztatjuk, akkor automatikusan betöltõdik az a kép, amelyet az új src attribútum meghatároz. Lássunk erre egy rövid példát!

<IMG SRC="pld081.jpg" NAME="elso" width=100 height=100>

Ez a HTML-bõl is ismert utasítás betölti a pld081.jpg nevû képet, miközben az "elso" nevet kapja. Ezen a néven hivatkozhatunk rá. A következõ programsor kicseréli ezt a képet a pld082.jpg nevû képre.

document.elso.src = "pld082.jpg";

Az új kép örökli az elõzõ méreteit, amiket nem is lehet megváltoztatni. Ha a gombra kattintunk, akkor rögtön kipróbálhatjuk a tanultakat.

<FORM>
<INPUT TYPE="button" VALUE="A kép cseréje"
 onClick="document.elso.src = 'pld082.jpg'">
</FORM>

Azonban ennek a megoldásnak van egy szépséghibája. Ugyan a képek kicsi mérete miatt, illetve a gyors betöltésnek köszönhetõen a második kép a gomb megnyomása után szinte azonnal megjelenik, de valójában van betöltési idõ. Még rosszabb a helyzet, ha a második kép nagy méretû, ráadásul az Interneten keresztül, kis sávszélességû (mondjuk modemes) kapcsolatnál töltõdik le. Ez a késés a legtöbb esetben elfogadhatatlan. Erre nyújt megoldást a képek elõre történõ betöltése.

Képek elõre történõ betöltése

Hozzuk létre az Image objektum egy példányát a következõ kóddal:

Az elsõ sor létrehozza a rejtett_kep nevû Image objektumot. A második sor beállítja az objektum src attribútumát, gyakorlatilag meghatározza a képet és annak címét. Ez most az aktuális könyvtárban lévõ pld082.jpg nevû kép. A kép gyakorlatilag ekkor már betöltõdik a memóriába, de még nem jelenik meg. Ezt viszont megtehetjük azzal, hogy egy -az oldalon lévõ kép- src attribútumához hozzárendeljük a rejtett_kep.src által meghatározott címet.

ducoment.egy_kep.src = rejtett_kep.src;

A kép a memóriában van, így azonnal megjelenik, nincs betöltési idõ.

Felhasználói események által kiváltott képcserék

Akkor érhetünk el igazán szép effektusokat az oldalainkon, ha a képekkel végzett manipulációkat felhasználói, pl. egéreseményekhez kapcsoljuk. Szinte minden szebb oldalon megjelennek olyan gombok, amelyek benyomódnak vagy más színben jelennek meg, ha az egér mutatót fölé visszük. Ezt két eseménykezelõvel valósíthatjuk meg. Az onMouseOver esetén betöltjük az új képet, míg az onMouseOut eseménynél visszaállítjuk a régit.

<A HREF="egy_cim" onMouseOver="document.kep.src='uj_kep.jpg'" 
                  onMouseOut="document.kep.src='regi_kep.jpg'">
<IMG SRC="regi_kep.jpg" NAME="kep" width=100 height=100 border=0></A>

Következzen egy teljesebb példa, amely öt gomb esetében mutatja be a fentieket.

<html>
<head>

<script language="javascript">
<!-- A JavaScript kód elrejtése

browserNev = navigator.appName;
browserVer = parseInt(navigator.appVersion);

if (browserNev == "Netscape" && browserVer >= 3) 
  browserVer = "1";
else if (browserNev == "Microsoft Internet Explorer" && browserVer == 4)
  browserVer = "1";
else browserVer = "2";

if (browserVer == 1){
  i1 = new Image(); i1.src = "pld083g.jpg";
  i2 = new Image(); i2.src = "pld083w.jpg";
  i3 = new Image(); i3.src = "pld084g.jpg";
  i4 = new Image(); i4.src = "pld084w.jpg";
  i5 = new Image(); i5.src = "pld085g.jpg";
  i6 = new Image(); i6.src = "pld085w.jpg";
  i7 = new Image(); i7.src = "pld086g.jpg";
  i8 = new Image(); i8.src = "pld086w.jpg";
  i9 = new Image(); i9.src = "pld087g.jpg";
  i10 = new Image(); i10.src = "pld087w.jpg";
}

function mutat(kep_nev,kep_obj){
  if (browserVer == 1)
    document.images[kep_nev].src = kep_obj.src;
}

// -->
</script>
</head>

<body bgcolor="white">

<center>
 <a href="pld08.htm" onMouseOver="mutat('link1',i2)"
  onMouseOut="mutat('link1',i1)">
 <img name="link1" src="pld083g.jpg" border=0 vspace=2></a>

 <a href="pld08.htm" onMouseOver="mutat('link2',i4)"
  onMouseOut="mutat('link2',i3)">
 <img name="link2" src="pld084g.jpg" border=0 vspace=2></a>

 <a href="pld08.htm" onMouseOver="mutat('link3',i6)"
  onMouseOut="mutat('link3',i5)">
 <img name="link3" src="pld085g.jpg" border=0 vspace=2></a>

 <a href="pld08.htm" onMouseOver="mutat('link4',i8)"
  onMouseOut="mutat('link4',i7)">
 <img name="link4" src="pld086g.jpg" border=0 vspace=2></a>

 <a href="pld08.htm" onMouseOver="mutat('link5',i10)"
  onMouseOut="mutat('link5',i9)">
 <img name="link5" src="pld087g.jpg" border=0 vspace=2></a>
</center>

</body>
</html>

A program elején megvizsgáljuk, hogy a felhasználó milyen böngészõvel rendelkezik. Lekérdezzük a böngészõ nevét a navigator objektum appName mezõjébõl. Hasonlóan kapjuk meg verzióját appVersion mezõbõl. Ha a használt böngészõ Netscape 3.0 vagy 4.0, illetve IE 4.0, akkor a browserVer változót 1-re állítjuk. Csak ebben az esetben futtatjuk le a program többi részét.

Ezután következik a kép objektumok létrehozása a már ismert módon.

A képek cseréjét a mutat() függvény végzi. Elsõ paramétere annak a képnek a neve, amelyet cserélni akarunk a második paraméter által meghatározott képre. Ezt a függvényt az onMouseOver és az onMouseOut események hívják meg.

<< Vissza a tartalomhoz

Tovább a kilencedik fejezethez >>