|
IV. Obrázky v JavaScripte... Pri putovaní svetom Internetu sa hojne stretávame s webmi, ktoré využívajú JavaScript na zvýrazňovanie informácií nachádzajúcich sa na stránke. Deje sa to väčšinou pomocou funkcie zámeny obrázkov. Na stránke sa nachádza niekoľko obrázkov a ak ukážeme myšou na jeden z nich, miesto neho sa zobrazí iný. Pracujeme s obrázkami (1) Nato, aby sme mohli v JavaScripte
niečo s obrázkami robiť, potrebujeme sa naučiť spôsob akým je možné
sa na ne odkazovať. Každému obrázku, ktorý sa na stránke zobrazí, prehliadač
stránok automaticky priradí poradové číslo. Prvému obrázku sa priradí
číslo 0, druhému 1, atď... PRÍKLAD 4.1 - Zámena obrázku <html> <head> <title>Zamena obrazku</title> </head> <body> <center> <img src="on.gif"><p> <a href="" onClick="document.images[0].src='off.gif';return false;"> Zamen obrazok</a> </center> </body> </html> Ako to celé funguje? Po načítaní tejto stránky, prehliadač zobrazí obrázok on.gif a pod ním zobrazí klikateľný odkaz Zamen obrazok. Ak klikneme na tento odkaz, činnosť prevezme udalosť onClick, ktorá obrázku s poradovým číslo 0 (on.gif) priradí novú adresu (off.gif). To spôsobí, že sa pôvodný obrázok on.gif zamení za off.gif. return false vráti hodnotu false udalosti onClick, čo má za následok to, že prehliadač stránok neodskočí na stránku, ktorú sme definovali v <A HREF="">. Pracujeme s obrázkami (2) Pristupovať k obrázkom pomocou poradových
čísel je dosť náročné a neprehľadné. Stačí ak pridáme na začiatok stránky
nový obrázok a všetky funkcie, v ktorých sa odvolávame na obrázky, musíme
prečíslovať. Preto existujú v JavaScripte aj iné spôsoby adresácie obrázkov. PRÍKLAD 4.2 - Žiarovka (zámena obrázku tam a späť) <html> <head> <title>Ziarovka</title> <script language="JavaScript"> <!-- // na zaciatku ziarovka nesvieti svieti=false; function vypinac()
{
if (!svieti) // ak este nesvieti, rozsviet
{
document.images.obr.src="on.gif";
svieti=true;
}
else // ak uz svieti, zhasni
{
document.images.obr.src="off.gif";
svieti=false;
}
}
// -->
</script>
</head>
<body>
<center>
<img name="obr" src="off.gif">
<form>
<input type="button" value="zapni/vypni" onClick="vypinac();">
</form>
</center>
</body>
</html>
Po nahratí stránky do prehliadača
sa do logickej premennej svieti priradí hodnota false
(tá udáva skriptu, že žiarovka je najprv zhasnutá). Následne potom sa
zobrazí obrázok zhasnutej žiarovky (off.gif) spolu s tlačítkom
zapni/vypni. Ak klikneme na tlačítko, činnosť prevezme udalosť
onClick, ktorá vyvolá funkciu vypinac(). Funkcia vypinac()
zisťuje, že či už žiarovka svieti alebo nie. Teda ak zistí, že ešte
žiarovka nesvieti (je splnená podmienka if (!svieti), ! predstavuje
negáciu výrazu), rozsvieti ju (zamení obrázok) a do premennej svieti
priradí hodnotu true (tá udáva skriptu, že žiarovka už svieti). Zámena obrázkov prakticky Predchádzajúce skripty skrývajú v
sebe jednu nevýhodu. Po nahratí stránky sa zobrazil obrázok. Po odkliknutí
na tlačítko (odkaz) dochádzalo k zámene tohto obrázku za iný, no ten
nový nebol pohotovo pripravený v pamäti prehliadača a trvalo určitý
čas, kým sa načítal a nastala zámena. Tento čas je zanedbateľný pri
stránkach, ktoré sa nachádzajú na našom disku alebo lokálnej sieti,
no v prípade pomalších spojení na Internet tento čas môže byť badateľnejší. PRÍKLAD 4.3 - Zámena obrázkov prakticky <html> <head> <title>Zamena obrazkov prakticky</title> <script> <!-- // nakesovanie obrazkov (preload) obr1=new Image(); obr1.src="on.gif"; obr2=new Image(); obr2.src="off.gif"; function zamen(nazov_obr,novy_obr)
{
document.images[nazov_obr].src=novy_obr;
}
// -->
</script>
</head>
<body>
<font size="6">Cielova trasa</font><br>
<table border="0">
<tr>
<td><a href="1.html"
onMouseOver="zamen('obr1','off.gif');"
onMouseOut="zamen('obr1','on.gif');">
<img src="on.gif" border="0" name="obr1"></a></td>
<td>PRAHA</td>
</tr>
<tr>
<td><a href="2.html"
onMouseOver="zamen('obr2','off.gif');"
onMouseOut="zamen('obr2','on.gif');">
<img src="on.gif" border="0" name="obr2"></a></td>
<td>BRATISLAVA</td>
</tr>
<tr>
<td><a href="3.html"
onMouseOver="zamen('obr3','off.gif');"
onMouseOut="zamen('obr3','on.gif');">
<img src="on.gif" border="0" name="obr3"></a></td>
<td>KOSICE</td>
</tr>
</table>
</body>
</html>
Záverom... Tak a máme zámenu obrázkov za sebou. Na záver ešte jedno upozornenie. Ak sa budete pokúšat tieto skripty spúšťať pod MS IE 3.0, tak to bude márne, pretože v tejto verzii nie je podporovaná zámena obrázkov. Plnú podporu priniesla až verzia MS IE 4.0. O tom, ako je možné skripty prispôsobiť pre rôzne verzie prehliadačov, o tom bude reč nabudúce... Rastislav Škultéty
NAHORU
|