Images objektum

Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Images objektum
A images objektum bemutatása
Elemváltozók (tulajdonságok) :
border		Keretvastagság megadás
complete		Betöltési állapot kijelzése
height		A grafika magassága
hspace		Vizszintes távolságtartás más objektumoktól
length		Grafikák száma
lowsrc		Betöltési grafika megadása
name		A grafika neve
src		Grafikus fájl betöltése
vspace		Függőleges távolság más objektumoktól
width		A grafika szélessége
Elemfüggvények (metódusok) :
handleEvent		Esemény továbbadása más objektumnak

Az images objektum bemutatása

Az image objektum által, mely a JavaScript objektum hierarhiában a document objektum alatt található, lehetőségünk van a dokumentumban lévő grafikus elemek megjelenésének befolyásolására illetve azok dinamikus cseréjére is. Az objektumot többféle módon is elérhetjük :

Példa 1:

document.images[#].tulajdonság
document.images[#].metódus()
magassag = document.images[0].height;

Példa 2:

document.képneve.tulajdonság
document.képneve.metódus()
magassag = document.tajkep_csata_utan.height;

Magyarázat:

A grafikus objektumokat kétféle módon szólíthatjuk meg :

sorszámmal, ahol a számozás 0-val kezd / Példa 1
névvel, ahogy az a name= után lett megadva / Példa 2

Azon grafikák esetében, melyeket dinamikusan a JavaScript segítségével kívánunk megejeleníteni (cserélni) különösen fontos, hogy nevet adjunk neki.

Példa:

masodik_kep = new Image();
masodik_kep.src = "blue_sky.gif";
document.images[0].src = masodik_kep.src;

Magyarázat:

Egy új grafikus objektumot hozunk létre : masodik_kepnéven, ahol a new fenntartott szó után az Image() metódus kerül meghívásra, melyet nagybetűvel kell írni. Az így létrehozott objektummal aztán már további dolgokat művelhetünk. Például az src elemváltozó segítségével egy grafikus fájlt rendelhetünk hozzá, dinamikusan kezelve és cserélve azt.

A témához kapcsolódó fejezet : Grafikus nyomógombok dinamikus cseréje

border

Megadja a keret vastagságát, ahogy az a border= .. <img> Tag-ban meg volt adva.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="javascript:alert(document.fire.border)">
 <img src="fire.gif" border=3 name="tüz">
</a>
</body></html>

complete

Megadja, hogy a grafika teljes betöltése megtörtént-e. Lehetséges értékek : true /false

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function vizsgal() { 
 var szoveg = "";
 for(i = 0; i < document.images.length; ++i) {
  if(document.images[i].complete == true)
   szoveg = szoveg + "Grafika " + (i+1) + " betöltve\n";
  else
   szoveg = szoveg + "Grafika " + (i+1) + " még nincs betöltve\n";
 }
 szoveg = szoveg + document.images.length + " garfika van összesen.";
 alert(szoveg);
}
</script>
</head><body>
 <img src="Fire.gif"><br>
 <img src="Palack.gif"><br>
 <img src="Hierarch.gif"><br>
<a href="javascript:vizsgal()">Grafikák betöltését vizsgálja</a>
</body></html>

Magyarázat:

A példa három grafikát és egy hivatkozást tartalmaz. Ha ráklikkelünk a hívó szövegre, akkor az meghívja a vizsgal() függvényt, melyet a fejrészben deklaráltunk. Ez a függvény egy for ciklus segítségével kiirja a grafikák betöltöttségi állapotát és számát egy üzenőablakban.

height

Megadja a grafikus objektum magasságát ahogy az a : height=.. <img> Tag-ban meg lett adva, de akkor is van értéke, ha azt külön nem adtuk meg.

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="Kitekint.gif" name="Kitekint">
<script language="JavaScript">
document.write(document.Kitekint.name + "<br>");
document.write
(document.Kitekint.width + " x " + document.Kitekint.height + " pixel a mérete");
</script>
</body></html>

hspace

Megadja a grafikus objektum távolságát a mellette lévő objektumoktól ahogy az a : hspace=.. <img> Tag-ban meg lett adva, különben az értéke: 0.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="javascript:alert(document.fire.hspace)">
<img src="fire.gif" hspace=30 name="fire">
</a>
</body></html>

length

Megadja a HTML fájlban lévő grafikus objektumok számát.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
</script>
</head><body>
 <img src="xxxx.jpg"><br>
 <img src="yyyy.gif"><br>
 <img src="wwww.jpg"><br>
<script language="JavaScript">
document.write
("<hr>Ezen az oldalon : " + document.images.length + " grafika van.");
</script>
</body></html>

lowsrc

Ha meg van adva, akkor az elő-garfikát tartalmazza, mely a betöltési folyamat alatt látható, különben az értéke üres.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="javascript:alert(document.images[0].lowsrc)">
<img src="tyuk.gif" lowsrc="tojas.gif">
</a>
</body></html>

name

Ha meg van adva, akkor a garfika nevét tartalmazza, különben az értéke üres.

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="gabi.gif" width=400 height=300 name="Gabi">
<script language="JavaScript">
  document.write("<br>" + document.images[0].name);
</script>
</body></html>

src

Meghatározza a betöltendő grafikus fájl nevét, ahogy az a src= .. <img> Tag-ban meg van adva. Ez a tulajdonság változtatható, ezáltal a grafikák dinamikusan kezelhetők, cserélhetők.Azonban ne feledjük, hogy a grafika mérete nem változik azáltal, ha egy másikat töltünk a helyére, tehát a szélesség és magasság értékek lehetőleg azonosak legyenek.

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="muki4.gif" width=68 height=63 name="muki">
<script language="JavaScript">
 var T = new Array();
  T[0] = new Image(); T[0].src = "muki1.gif";
  T[1] = new Image(); T[1].src = "muki2.gif";
  T[2] = new Image(); T[2].src = "muki3.gif";
  T[3] = new Image(); T[3].src = "muki4.gif";
 var i = 0;
 function csere() {
  if(i > 3) i = 0; document.images[0].src = T[i].src;
  i = i + 1;
  window.setTimeout("csere()",500);
 }
 window.setTimeout("csere()",500);
</script>
</body></html>

Magyarázat:

A példában a window.setTimeout() metódus hívásával fél másodpercenként rátöltjük a T tömbben deklarált grafikus objektumokat a muki nevű objektumra, folyamatosan, vég nélkül.

vspace

Magadja a felette és alatta levő objektumtól pixelben mért távolságot, ahogy az a vspace= .. <img> Tag-ban van megadva. Ha nincs megadva, az értéke nulla.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="javascript:alert(document.valami.vspace)">
<img src="valami.jpg" vspace=8 name="valami">
</a>
</body></html>

width

Megadja a grafikus objektum szélességét, ahogy az a : width=.. <img> Tag-ban meg lett adva, de akkor is van értéke, ha azt külön nem adtuk meg.

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="valami.jpg" name="valami">
<script language="JavaScript">
document.write(document.valami.name + "<br>");
document.write
(document.valami.width + " x " + document.valami.height + " pixel");
</script>
</body></html>

handleEvent()

Továbbadja a vezérlést egy olyan objektumnak, mely képes arra reagálni.Ugyanúgy működik mint a window.handleEvent() metódusa.

Készült : 1999-08-31. Lengyel Sándor