Upoutávka v textovém poli pomocí JavaScriptu

5. prosince 2001

•

Tento článek popisuje další z řady animačních efektů, které můžeme použít pro zvýraznění aktuální nabídky, důležitých odkazů nebo jiné zajímavé části WWW stránky. Sada textů je pomocí JavaScriptu animována v textovém poli vyhrazeného formuláře.

Jak může podobná upoutávka vypadat, vidíte v následujícím zeleném řádku:

Pro zprovoznění upoutávky je potřeba nejdříve připravit formulář s textovým polem, do nějž budeme později vypisovat animovaný text. Pro dotvoření vzhledu lze s výhodou využít vlastností inline stylů, takže, pokud používáte prohlížeč Internet explorer, měli byste vidět textové pole žluté a bez okrajů. HTML kód formuláře (s vloženou tabulkou) může pak vypadat následovně:

<form name="ss" onClick="Redirect()" onSubmit="return false">
<table border="0" cellpadding="2" cellspacing="0" bgcolor="#00FF00">
<tr>
<td>Vyzkoušejte:  </td>
<td><input disabled type="text" name="output" size="29" style="background-color: rgb(255,255,0); border: 0px"></td>
</tr></table></form>

Povšimněte si (v handleru události onClick) volání funkce Redirect, která slouží k přesměrování na stránku, popisující daný produkt, v případě, že návštěvník klikne myší nad formulářem. Funkci Redirect si popíšeme níže, zde uvedený kód formuláře je však potřeba doplnit ještě o generování přesměrovávacího tlačítka pro prohlížeč Netscape (ten událost onClick na formuláři ignoruje). Následující JavaScriptový kód, který pro jiné než Microsoftí prohlížeče vytváří příslušné tlačítko, můžeme umístit třeba za definici textového pole:

if (navigator.appName.indexOf("Microsoft")==-1) {
document.write(‚<input type="button" value=" GO " onClick="Redirect()">‘);
}

Do HTML stránky (za definici formuláře) ještě umístíme spuštění celé animace – volání funkce SlideShow:

SlideShow();

Funkce Redirect a SlideShow, volané v předchozím kódu, je potřeba samozřejmě definovat, a s nimi také několik globálních proměnných a konstant. Začněme globálními proměnnými (všechen dále uvedený kód je vhodné umístit do skriptu v hlavičce stránky). Zadefinujeme dvě pole, první pro zobrazované texty, druhé pro URL adresy, na něž budeme v případě kliknutí přesměrovávat:

var texts = [ "Nové ponožky Extra!",
    "Podkolenky pro pány",
    "Žluté ponožky pro děti",
    "Punčochy značky Maryša" ];
var urls = [ "extra.htm",
    "propany.htm",
    "prodeti.htm",
    "marysa.htm" ];

Dvě další globální proměnné jsou indexy, první z nich ukazuje na aktuální pozici v poli texts, potažmo urls, druhý na právě vypisované písmeno v aktuálním textu:

var tpos = 0;
var tposStr = 0;

Poslední trojice globálních proměnných jsou časové konstanty, kde i1 určuje rychlost vypisování písmen textu, i2 dobu, po kterou zůstává celý text zobrazen a i3 rychlost „odrolovávání“ textu doleva. Všechny tři konstanty jsou vlastně intevaly prodlevy vyjádřené v milisekundách:

var i1 = 100;
var i2 = 1000;
var i3 = 5;

Přesměrovávací funkce Redirect by v „ostré“ verzi skriptu měla modifikovat vlastnost location.href, zde v ukázce je místo toho pouze zobrazována cílová URL adresa:

function Redirect() {
alert(‚Přesměrování na stránku "’+urls[tpos]+’"‘);
}

Funkce SlideShow (která spustí animaci) funguje jako zapouzdření prvního volání funkce Animate – lze se bez ní tedy i obejít a funkci Animate můžeme z JavaScriptového kódu uprostřed stránky spustit přímo:

function SlideShow() {
setTimeout("Animate(1)",i1);
}

Veškerá práce tak zbyla na funkci Animate, která musí zabezpečit nalezení správného textového řetězce v poli texts, jeho „ořezání“ a umístění do výstupního textového pole a také své opětovné volání pomocí funkce setTimeout. K ukládání aktuální animační pozice slouží výše zmíněné indexy tpostposStr, parametr iPhase určujě aktuální fázi animace – zda je text zleva doprava vypisován (iPhase=1) či zda je zpětně „odrolováván“ doleva (iPhase=2). Zde je kompletní kód funkce Animate, který je také posledním JavaScriptem použitým v příkladu:

Tolik k animované upoutávce, na závěr snad jen jednu poznámku:
Protože upoutávka nebude pracovat tam, kde není zapnut JavaScript, bylo by vhodné zabezpečit, aby v těchto případech „nestrašilo“ na stránce nefunkční formulářové pole. Elegantně se tomu můžeme vyhnout tak, že celý formulář vypíšeme pomocí JavaScriptu – není dlouhý, takže nám mnoho práce navíc nepřidá.

Přeji vám příjemný den.

Předchozí článek Náhodné citáty pro váš web pomocí ASP téměř bez práce

Další článek Použití CSS pro zalomení stránky na tiskárně 1.