Pulzující barva odkazů

19. ledna 2003

•

JavaScript je často používán pro tvorbu „eyecatchers“ – efektů, sloužících k upoutání uživatelovy pozornosti. Naštěstí už je pryč doba křiklavých stránek přeplácaných nejrůznějším blikáním a animacemi, trendem doby je nahrazování těchto nehumánních metod poněkud decentnějšími efekty. Jedním z nich je i pulzující barva odkazu, popsaná v tomto článku.

Ukázka efektu, jímž se budeme zabývat.

Šedá tabulka obsahuje několik odkazů, vypsaných JavaScriptem, které jsou jeden za druhým zesvětlovány od černé po modrou a znovu ztmavovány zpět k barvě černé.

Popis skriptu

Než se pustíme do samotného skriptu, nejprve několik poznámek ke kompatibilitě. Skript používá funkce podporované v prohlížeči Internet Explorer od verze 5 a v prohlížeči Netscape Navigator od verze 6. Ve starších prohlížečích nebude animace pracovat, budou vypsány pouze odkazy. Tabulka odkazů je také vypisována skriptem, proto je vhodné použít známý „NOSCRIPT“ element pro zobrazení alternativního obsahu uživatelům bez JavaScriptu.

V místě, kde chceme mít vypsánu příslušnou tabulku odkazů, umístíme volání funkce vypisující tabulku odkazů a nastavení časovače pro animační funkci, která zajistí změnu barvy odkazů. Změnou druhého parametru funkce setInterval lze měnit rychlost animace:

WriteTable();
setInterval(„Hilight()“,50);

Než vypíšeme odkazy funkcí WriteTable, je třeba nastavit několik parametrů celého skriptu. V poli arr je seznam všech odkazů a textů na těchto odkazech, proměnné rMin, rMax, gMin, gMax, bMin a bMax určují meze pro tři RGB složky, mezi nimiž bude pulzovat barva odkazu. Meze lze nastavit i opačně než je uvedeno, tj. horní mez nižší než dolní, v takovém případě je barva měněna ze světlé na tmavou a zpět:

var arr = [
    [ „Auta“, „http://abababababa.cz“],
    [ „Letadla“, „http://xxxxxxxxxxxxxxxxxx.cz“],
    [ „Stromy“, „http://mmmmmmmmmmmmmmmmmmmmm.com“],
    [ „Jóga“, „http://wooooooooooooooooooooow.cz“],
    [ „Pizza“, „http://hxhhxhxhxhxhxhxhx.cz“],
    [ „Železo“, „http://uuuuuuuuuuuuuuuuuuuuu.cz“ ] ];
var rMin=0;
var rMax=127;
var gMin=0;
var gMax=127;
var bMin=0;
var bMax=255;

A zde je kód funkce WriteTable:

function WriteTable() {
    var i;
    document.write( „<table width=’400′ border=’0′ bgcolor=’silver‘>“ );
    for( i=0; i<arr.length; i++ ) {
        document.write( „<tr><td><a ID=\“mylink“+i+“\“ href=\““+arr[i][1]+“\“ style=\“color: RGB(“ + rMin + „,“ + gMin + „,“ + bMin + „); text-decoration: none\“>“ + arr[i][0] + „</td></tr>“ );
    }
    document.write( „</table>“ );
}

Poslední částí kódu je „Animační“ funkce Hilight. Ta provádí vždy jeden animační krok – nejprve mění barvu jednoho odkazu od minima po maximum (viz výše posané „min“ a „max“ proměnné), poté mění barvu zpět k „min“ hodnotě, a nakonec, jakmile je jeden animační cyklus dokončen, přesouvá se animace na další odkaz z pole arr. Počet animačních kroků je 20 (deset na zesvětlení, deset na ztmavení), což zaručuje poměrně plynulou změnu barvy. Funkce dále používá dvě pomocné globální proměnné hphase a lphase, v nichž uchovává aktuální fázi animace a index odkazu, jenž je animován:

Uvedený skript lze pochopitelně dále modifikovat, například animovat i jiné prvky stránky než odkazy, změnit způsob animace, kdy nejprve jsou všechny odkazy zesvětleny a poté jeden po druhém ztmaveny a podobně. Kompletní zdrojový kód přikladu je vám k dispozici.