JavaScriptové bannery 1.

28. ledna 2000

•

V nedávno publikovaném článku jsme vám ukázali, jak pomocí JavaScriptu vytvořit systém, který bude automaticky v zadaných časových intervalech obměňovat obrázky. Někteří čtenáři ovšem namítali, že obdobnou rotaci lze v řadě případů nahradit animovaným gifem. Vaše ohlasy pak vedly ke vzniku tohoto cyklu dvou článků, ve kterém vám ukážeme, jak pouze s pomocí JavaScriptu lze vytvářet zajímavé animace.

Na začátek je potřeba říci, že většina skriptů jsou funkční pouze v Microsoft Internet Exploreru 4.0 nebo vyšší verzi tohoto prohlížeče. Netscape Navigator totiž neumožňuje využívat tzv. filtrů, s jejichž pomocí můžeme vytvořit například následující animaci.

Ukázka

Nejprve načteme všechny potřebné obrázky do cache počítače. Tak zajistíme pozdější bezproblémové zobrazování jednotlivých obrázků. Nadefinujeme také počet obrázků (proměnná pocet) a dobu zobrazení jednotlivých obrázků (proměnná doba v milisekundách).

Samozřejmě musíme také definovat vlastní obrázek: HTML kód našeho příkladu vidíte níže.

Zde si především povšimněte parametru style, kde je nadefinován filtr, který bude využit při animaci. Vybral jsem Blend Transition filtr, jenž způsobuje postupné vzájemné prolínání obrázků. Příkaz duration pak určuje délku vlastního prostupování obrázků (v sekundách).

Funkce vedoucí k vlastní animaci obrázků pak vypadá následovně.

Nyní si podrobně vysvětlíme jednotlivé části kódu: při spuštění funkce rotate() prohlížeč nejdříve ověří, zdali je objekt s&le (ID našeho obrázku) podporován (podmínka if (window.document.s&le). Jestliže je podmínka splněna (pouze v MSIE 4.0 a vyšší), proběhne vlastní animace pomocí filtru, přesněji pomocí příkazu filters.blendTrans.Apply() a filters.blendTrans.Play().

Nesmíme však také zapomenout na jiné prohlížeče než je MSIE. Proto pokud prohlížeč zjistí, že objekt s&le (představující ID obrázku) není podporován, proběhne výměna obrázků bez efektů.

Proměnná rotator kontroluje zobrazování správného obrázku. Interval jednotlivých zobrazení je pak určen funkcí setTimeout(), kde zadáváme dobu zobrazení (v milisekundách) Funkci rotate() zavoláme samozřejmě ihned po načtení stránky. Do tagu <body> tak přidáme parametr onLoad:

Obdobným způsobem jako jsme použili filtr Blend Transition můžeme použít i celou řadu dalších, které si představíme v dalším pokračování tohoto našeho cyklu.

Závěrem

Aplikace filtrů přináší řadu výhod, ale také nevýhod. Zřejmým nedostatkem je především nekompatibilita s Netscape Navigatorem a dalšími prohlížeči. Proto je praktické použití takto vytvořených animací značně omezené. Oproti klasickým animovaným gifům přinášejí jednu podstatnou výhodu a to ve snížení množství přenesených dat. Už z toho důvodu by si filtry zasloužily více pozornosti i v budoucnosti.

Zobrazit kompletní zdrojový kód skriptu