Plovoucí reklama v JavaScriptu

17. ledna 2003

•

Stále častěji se na WWW stránkách setkáváme s reklamou, která by se dala nazvat „plovoucí“. Jedná se o různá reklamní okénka a texty, pohybující se po stránce nezávisle na ostatním jejím obsahu. Pokud nechceme nebo nemůžeme pro podobnou animaci použít Flash, jako alternativa se nabízí (a často používá) starý dobrý JavaScript.

Malý příklad hovoří za vše. Na stránce plné odpudivé grafiky a křiklavých barev zaujme čtenářovu pozornost pohybující se odkaz v horní části, navíc se text i cíl odkazu při každém průběhu mění, takže lze takto do poměrně malého reklamního prostoru „nacpat“ velký objem odkazů. Příklad však vyžaduje modernější prohlížeč, konkrétně MSIE verze 5 a vyšší a NN od verze 6. U starších prohlížečů zůstane příslušné okénko prázdné, eventuelně lze do něj vypsat JavaScriptem jednu z uvedených reklam staticky. Skupině uživatelů s vypnutým JavaScriptem můžeme nabídnout alternativní obsah daného pole s využitím známého elementu NOSCRIPT.

Popis použitého kódu

HTML kódem stránky uvedené v příkladu se zabývat nebudeme, ten je pro naše účely víceméně nepodstatný. Prvním úkolem bude vytvořit (pomocí JavaScriptu, ovšemže) HTML element, který bude nositelem obsahu reklamy. Protože takový název je poněkud krkolomný, budu v dalším textu používat hrubě nepřesné, ale zato stručné pojmenování „reklamní tag“.

Vytvořme tedy reklamní tag, zarámujme tuto akci do podmínky, vyřazující ze hry starší prohlížeče, a nastavme časovač, který bude periodicky spouštět animační funkci. Celý uvedený kód vložme na vhodné místo do těla stránky, například těsně před závěrečný tag elementu BODY:

if(document.getElementById) {
document.write(‚<a ID=“adver“ href=“‚+ads[0][1]+'“ target=“_blank“ STYLE=“visibility:visible; position:absolute; left:’+iRight+‘; top:’+iTop+'“ ></a>‘);
setInterval( „Animate()“,25);
}

Jak je vidět z kódu, byly použity jakési neznámé proměnné jako iTop, iRight a podobně. Jedná se o jedny z parametrů celé animace, které je vhodné uvést v hlavičce stránky. Jelikož parametrů je povícero, uvedeme je všechny najednou, s příslušnými vysvětlivkami přímo v komentářích:

var iLeft=10; // leva hranice, po niz se text pohybuje
var iRight=640; // prava hranice, od niz se text pohybuje
var iTop=90; // horni pozice textu
var iMove=14; // posun pri jednom kroku
var iStay=30; // kolik kroku se ma cekat vlevo
var iLettersInc=2; // po kolika pismenech se pridava pri „vysunovani“ textu

K parametrům patří také seznam všech textů a odkazů (tedy vlastní obsah reklamy), jenž zadáme do dvourozměrného pole tamtéž (pole může obsahovat libovolný nenulový počet řádků, tedy reklam):

var ads = [
    [ „Reklama na Seznam“, „http://www.seznam.cz“ ],
    [ „Reklama na Google“, „http://www.google.com“ ],
    [ „Reklama na Yahoo“, „http://www.yahoo.com“ ] ];

Za definicí parametrů a reklamního obsahu následuje definice hrstky pomocných proměnných, které posléze využije animační funkce. Zde jsou, opět lehce okomentované:

var iPos=iRight; // horiz. pozice textu
var iLetters=0; // pocet zobrazenych pismen
var iPhase = 0; // animacni faze
var iWaiter = 0; // „odcekana“ doba
var iAd=0; // ktera reklama se zobrazuje

Z celého kódu pro plovoucí reklamu už zbývá poslední, ale zato nejrozsáhlejší část, totiž vlastní funkce Animate.

Úkolem funkce Animate je provést jeden animační krok – tedy v závislosti na nastavení proměnnné iPhase buď posunout reklamní tag o kousek doleva (jsme-li ve fázi posunu), nebo posečkat určitý počet kroků na levé krajní pozici (jsme-li ve fázi čekání, která byla do skriptu implementována proto, aby měl uživatel vůbec reálnou šanci na reklamní tag kliknout). Ve fázi posunu dále funkce Animate u pravého okraje vyhrazené oblasti simuluje efekt postupného vysouvání textu tím, že do vlastnosti innerHTML reklamního tagu vypisuje postupně se zvětšující část textu. Posledním úkolem funkce Animate je zajistit cyklování v poli reklamních odkazů, přičemž k přechodu na další prvek dochází vždy po ukončení čekací fáze.