Ako na to  |  Príručka JavaScript  |  Obrázky

Fotoalbum alebo prezentačné okná v praxi

Ako je už pomaly zvykom, i na záver tejto časti seriálu si uvedieme jeden praktický príklad, na ktorom je možné demonštrovať otváranie okien. V tomto príklade pôjde o zobrazenie fotografie v plnej veľkosti po odkliknutí na jej zmenšenú podobu. Môžete si všimnúť, že novootvorené okno má presne stanovené rozmery a naviac obrázok je v ňom vycentrovaný...

PRÍKLAD 3.3 - Fotoalbum s jednou zväčšovacou fotografiou

pr3-3.html

<html>
<head>
<title>Fotoalbum</title>
<script>
<!--
function otvor_okno()
{
window.open("pr3-3-1.html","okienko","width=386,height=274,top=10,left=10");
}
// -->
</script>
</head>
<body>
<a href="#" onClick="otvor_okno();">
<img src="fotkamala.jpg" border="0" alt="" width="100" height="70"></a>
</body>
</html>

pr3-3-1.html

<html>
<head>
<title>Fotografia</title>
</head>
<body bgcolor="white" topmargin="8" leftmargin="8">
<img src="fotkavelka.jpg" border="1" alt="" width="368" height="257">
</body>
</html>

V uvedenom príklade sa vyskytuje nový prvok. Je ním parameter onClick, ktorý sa nachádza v súbore pr3-3.html vo vnútri tagu <A HREF=""></a>. Tento parameter nazývame tiež definíciou udalosti (zoznam ostatných udalostí uvedieme nabudúce). Udáva, aká funkcia má byť vykonaná, ak dôjde ku kliknutiu na daný odkaz. V našom prípade sa vyvolá funkcia otvor_okno(). Táto funkcia vyvolá už spomenutú funkciu window.open(), ktorá na základe vstupných parametrov otvorí nové okno a do neho načíta stránku pr3-3-1.html.
Ak by ste chceli mať na stránke viac takých obrázkov, na ktoré by sa dalo kliknúť a otvorili by sa nové okná, je potrebné vytvoriť ďalšie funkcie v skripte (otvor_okno2(), otvor_okno3()...) a potom následne do tagov prislúchajúcim tým obrázkom <A HREF> pridať daný parameter onClick...

Close the windows, close the gates

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ď...
K samotnému obrázku potom pristupujeme pomocou document.images[cislo_obr]. Ak chceme napr. zmeniť URL adresu obrázku, prevedieme to cez document.images[cislo_obr].src="novy_obr.gif". Táto zmena spôsobí to, že sa starý obrázok nahradí novým. Viď príklad:

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.
Každý obrázok, ktorý nechávame na stránke zobraziť pomocou tagu <IMG> je možné pomenovať. Realizujeme to pridaním parametra NAME="nazov_obr" do tohto tagu. Vždy, keď budeme potrebovať sa na takýto obrazok odkázať, môžeme to urobiť pomocou document.images.nazov_obr alebo document.images["nazov_obr"]. Odpadajú nám takto prípadné starosti súvisiace s pridávaním nových obrázkov do dokumentu a naviac získame oveľa prehliadnejšie skripty.
V nasledujúcom príklade si ukážeme niečo zložitejšie. Využijeme naše znalosti z minulých čísel seriálu a pomocou konštrukcií if..else si navrhneme skript, ktorý bude plniť funkciu vypínača. Po nahratí stránky, sa na obrazovke zobrazí fialová "žiarovka". Ak klikneme na tlačítkozapni/vypni, žiarovka sa nám rozsvieti (zmení farbu na žltú). Opätovným kliknutím na toto tlačítko, žiarovka zhasne. Ďalším kliknutím sa žiarovka opäť rozsvieti...atď

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).
Ak opäť klikneme na tlačítko, výraz vo vnútriif-u sa stane nepravdivým, a preto činnosť prevezme else. Else zamení obrázok on.gif za off.gif a do premennej svieti priradí hodnotu false (žiarovka zhasne).

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ší.
Túto nevýhodu je možné odstrániť tzv. nakešovaním obrázkov (preload). Hneď na začiatku skriptu, si môžete všimnúť spôsob akým sa to realizuje. Nadefinujeme si 2 objekty typu obrázok, do ktorých natiahneme naše obrázky. Teda v skutočnosti sa obrázky nahrajú, no nezobrazia sa. Skúsených webmasterov určite napadne aj iné využitie takéhoto "zobrazovania" obrázkov. ;-))
Nasledujúci skript plní funkciu zvýrazňovača. Po ukázaní myšou na 1 z 3 gulí, táto guľa zhasne, pretože dôjde k vykonaniu funkcie zamen ukrytej v udalosti onMouseOver. Ak sa myšou vzdialime od gule, táto guľa sa rozsvieti, pretože teraz nastane udalosť onMouseOut, ktorá vykoná opačnú zámenu obrázku.

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>

   








Home | Ako na to | Na stiahnutie | Tipy a triky | Diskusné fórum | Profesionálny webdesign | Kontakt
 
 




ISTUDIO webdesign & programming