Vytvořte si reklamní banner pomocí JavaScriptu!

15. ledna 2001

•

Jedním z pěkných efektů pro upoutání pozornosti návštěvníka WWW stránky je proměnlivá upoutávka – krátký text, postupně zobrazující jednotlivé novinky či jiné nadpisy. Takový efekt se většinou vytváří pomocí Java appletů – což má své nevýhody. Ukážeme si, jak lze vytvořit upoutávku čistým JavaScriptem.

Nejprve si předvedeme, jak taková upoutávka vypadá v praxi.

Zde jsou novinky: Nové BMW Z3 Mercedes S565i Anketa: Čím jezdíte do práce? Pro náročné: Rolls-Royce COMBI

Máte-li prohlížeč verze 4 a vyšší, měli byste na předchozím řádku vidět měnící se text. Uvedený příklad byl testován na Internet Exploreru 5.0 a Netscape 4.08.

Nyní k samotnému skriptu. V hlavičce stránky definujeme dvě pomocné proměnné (které nám slouží pro uchování počtu řádků upoutávky a aktuálně zobrazeného řádku) a funkci Loop()…

var wordspos = 1;
var wordslength = 4;
function Loop() {
setTimeout(‚Loop()‘, 1000);
showIt();
}

…která pracuje jako časovač, zajišťující cyklické volání hlavní výkonné funkce showIt():

Funkce showIt() se skládá se dvou obdobných částí. První se vykonává pro prohlížeč MSIE (podmínka document.all), druhá pro NN (podmínka document.layers). Vzhledem k tomu, že oba prohlížeče jsou v tomto případě nekompatibilní, musíme bohužel použít takto „dvakrát“ napsaný kód. Pokud si kód prohlédnete pozorně, zjistíte, že se vlastně nejedná o záměnu textu v pravém slova smyslu – ve skutečnosti jsou pouze střídavě skrývány a zobrazovány jednotlivé řádky textu (pojmenované navesti1 až navesti4).

Řádky navesti1 až navesti4 definujeme pomocí HTML tagu SPAN, který nám umožňuje umístit do stejného (myšleno pozicí na obrazovce) místa v HTML stránce několik různých HTML kódů. Pro uvedený příklad se čtyřmi řádky upoutávky tedy definujeme tag SPAN čtyřikrát, přičemž u prvního z nich nastavíme vlastnost VISIBILITY na hodnotu VISIBLE a u ostatních na hodnotu HIDDEN.

<big>Nové BMW Z3</big>


 <big>Mercedes S565i</big>


 <big>Anketa: Čím jezdíte do práce?</big>


 <big>Pro náročné: Rolls-Royce COMBI</big>

Přepínání vlastností VISIBILITY zajišťuje výše uvedená funkce showIt ve spojitosti s časovačem Loop. Nakonec – po definici tagů SPAN – zajistíme první zavolání funkce Loop() a tím i spuštění upoutávky:

Loop();

Mezi tagy SPAN můžeme umístit různý HTML kód – v ukázce jsme použili různé barvy písma, ale lze definovat rovněž tabulky, obrázky, hypertextové odkazy a další. Chceme-li přidat další řádky upoutávky, je kromě přidání dalších tagů SPAN zapotřebí změnit i proměnnou wordslength, uvedenou v úvodním skriptu.

A to je vše k upoutávce, přeji vám příjemný den.