A JavaScript
1998, Juray Tamás

8. fejezet: 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  az újság CD mellékletéről 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:

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="kep1.jpg" NAME="elso" width=100 height=100>

Ez a HTML-ből is ismert utasítás betölti a kep1.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 kep2.jpg nevű képre. 

document.elso.src = "kep2.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 = 'kep2.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: 

rejtett_kep = new Image();
rejtett_kep.src = "kep2.gif";

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ő kep2.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 = "gomb1g.jpg";
  i2 = new Image(); i2.src = "gomb1w.jpg";
  i3 = new Image(); i3.src = "gomb2g.jpg";
  i4 = new Image(); i4.src = "gomb2w.jpg";
  i5 = new Image(); i5.src = "gomb3g.jpg";
  i6 = new Image(); i6.src = "gomb3w.jpg";
  i7 = new Image(); i7.src = "gomb4g.jpg";
  i8 = new Image(); i8.src = "gomb4w.jpg";
  i9 = new Image(); i9.src = "gomb5g.jpg";
  i10 = new Image(); i10.src = "gomb5w.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="link.htm" onMouseOver="mutat('link1',i2)" onMouseOut="mutat('link1',i1)">
 <img name="link1" src="gomb1g.jpg" border=0 vspace=2></a>

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

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

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

 <a href="link.htm" onMouseOver="mutat('link5',i10)" onMouseOut="mutat('link5',i9)">
 <img name="link5" src="gomb5g.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.

Az újság következő számában foglalkozunk még néhány olyan újdonsággal, amelyeket csak a legfrissebb böngészők támogatnak, de segítségükkel érdekes, látványos effektusokat hozhatunk létre az oldalainkon.
Megismerkedünk majd a JavaScript "sütikkel" is, amelyek a háttérben fejtik ki tevékenységüket...  [ Tartalomjegyzék ] [ 7. fejezet ]