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

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():

function showIt() {
    if (document.all) {
        var navesti = eval("document.all.navesti"+wordspos)
        navesti.style.visibility="hidden";
       
        wordspos++;
        if (wordspos > wordslength)
            wordspos=1
   
        navesti = eval("document.all.navesti"+wordspos)
        navesti.style.visibility="visible";
    }
    if (document.layers) {
        var navesti = eval("document.navesti"+wordspos)
        navesti.visibility="hidden";
       
        wordspos++;
        if (wordspos > wordslength)
            wordspos=1
   
        navesti = eval("document.navesti"+wordspos)
        navesti.visibility="visible";
    }
}

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.

<span id="navesti1" style="position:absolute;visibility:visible;">
    <big><font color=’maroon‘>Nové BMW Z3</font></big>
</span>
<span id="navesti2" style="position:absolute;visibility:hidden;">
    <big><font color=’black‘>Mercedes S565i</font></big>
</span>
<span id="navesti3" style="position:absolute;visibility:hidden;">
    <big><font color=’navy‘>Anketa: Čím jezdíte do práce?</font></big>
</span>
<span id="navesti4" style="position:absolute;visibility:hidden;">
    <big><font color=’green‘>Pro náročné: Rolls-Royce COMBI</font></big>
</span>

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.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět