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:
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.
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.
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.
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.
Következzen egy teljesebb példa, amely öt gomb esetében mutatja be a
fentieket.
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.ducoment.egy_kep.src = rejtett_kep.src;
<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>
<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>