Jak rolovat text nebo obrázek pomocí HTML?

15. června 2000

•

Rolování libovolného textu nebo obrázku je snad ten nejsnadnější způsob, jak upoutat návštěvníka vašeho webu a upozornit jej třeba na nové aktuality. Na rolování textu není potřeba JavaScript, vystačíme si s pouhým jazykem HTML.

V jazyku HTML slouží pro rolování a posun textu párový tag <MARQUEE>, který uvedla do života společnost Microsoft. Je podporován pouze v Internet Exploreru pravděpodobně od verze 4.0. V Netscape Navigátoru tento tag není funkční, což je správné, protože tento tag není podporován specifikací HTML 4.0. To nám nicméně nebrání jej na stránkách používat, pro zobrazení důležitých informací v Netscape Navigatoru naleznete tip ke konci článku.

Text, který se posouvá

Syntaxe tagu <MARQUEE> je poměrně obsáhlá a nabízí široké možnosti. Parametry, které je možné použít, jsou uvedeny v následující tabulce:

ALIGN	– zarovnání rolujícího textu. Atributy zarovnání jsou stejné jako u tagu <IMG>
BEHAVIOR	– druh posunu textu (scroll/slide/alternate)
BGCOLOR	– určuje pozadí textu, který se posouvá
DIRECTION	– směr posunu textu (left/right/up/down). Implicitní hodnota je left, což znamená, že text se posunuje zprava doleva.
HEIGHT	– výška obdélníku, v němž se text posunuje. Jeho použití má smysl pouze v případě, když se máte posouvat směrem dolů nebo nahoru (DIRECTION=up/down). Hodnotu je možné zadávat v pixelech nebo v procentuální hodnotě velikosti okna (100% = celé okno).
WIDTH	– délka obdélníku, ke kterém se bude text posunovat. Hodnotu je možné zadávat v pixelech nebo v procentuální hodnotě velikosti okna (100% = celé okno).
HSPACE	– stejná funkčnost jako u tagu <IMG>. Určuje volný prostor v pixelech směrem vlevo a vpravo
VSPACE	– stejná funkčnost jako u tagu <IMG>. Určuje volný prostor v pixelech směrem nahoru a dolu
LOOP	– určuje, kolikrát se má text posouvat. Je možný zadat přímo počet nebo hodnotu „Infinite“ – test se bude posouvat pořád.
SCROLLAMOUNT	– definuje počet pixelů mezi jednotlivým skoky textu. Pokud není uveden, je brána implicitní hodnota 6 pixelů.
SCROLLDEALY	– definuje dobu uvedenou v milisekundách, která uplynune mezi jednotlivými poskoky textu.

Příklad použití:

<marquee width=“400″ behavior=“scroll“ direction=“left“ scrolldelay=“100″ bgcolor=“black“><b><font color=“white“ size=“2″>Text, který se nyní roluje zprava doleva…</font></b></marquee>

Jak už jsem v tabulce uvedl, parametr Behavior určuje druh posunu textu – je možné uvést scroll, slide nebo alternate. Atribut scroll, který je uváděn jako implicitní znamená, že se objeví u zadaného okraje, posouvá se na druhý a tam celý zmizí. Atribut slide znamená, že se text objeví u zadaného okraje, posouvá se na druhý a tam se zastaví. A poslední atribut alternate znamená, že se text objeví u zadaného okraje, posouvá se na druhý a pak se vrátí zpět. Ukázky následující, první je scroll, druhá slide a třetí alternate:

Použití atributu SCROLL

Použití atributu SLIDE

Použití atributu ALTERNATE

Z textu jste jistě pochopili, že je možné text posouvat nejenom doleva a doprava, ale i nahoru a dolů. Stačí uvést v parametru DIRECTION atribut Up nebo Down a nemusíte používat složité dynamické HTML:

Použití atributu SCROLL – směr nahoru

Použití atributu SCROLL – směr dole

Jak je z uvedených příkladů vidět, možnosti použití tagu <MARQUEE> jsou opravdu široké. Dá se například použít jako upoutávka na nové články apod. Ale to se stane v případě, když návštěvník navštíví stránku, obsahující <MARQUEE> a má Netscape Navigator? Nestane se nic – text se zobrazí, nicméně se nebude nikam posouvat, bude stát na místě, což je škoda.

Od tohoto problému vám může alespoň trochu pomocí následující JavaScript. Ten si zjišťuje kódové jméno prohlížeče a v případě, že zjistí, že používáte Internet Explorer, ukáže vám efekt tagu <MARQUEE>. V případě, že se prohlížeč jmenuje jako Netscape, text začne blikat pomocí tagu <BLINK>. Není to sice přesně ono, ale svůj účel to plní.

<SCRIPT LANGUAGE=“JavaScript“>
<!–
mesg = „Text, který se posouvá nebo bliká v NN“;
isNS = (navigator.appName == „Netscape“)
isIE = (navigator.appName == „Microsoft Internet Explorer“)
text = („<font size=2 face=arial>“+mesg+“</font>“)
if (isNS) {
document.write(„<blink><fon color=white><b>“ + text + „&lt/;b></font></blink>“)}
else if (isIE) {
document.write(„<marquee width=400 behavior=scroll direction=left scrolldelay=100 bgcolor=black><font color=white><b>“ + text + „</b></font></MARQUEE>“)}
// –>
</SCRIPT>

Tipy při používání <MARQUEE>

Vyvarujte se několikanásobnému použití <MARQUEE> pod sebou. Návštěvník pak neví, jaký text má číst dříve a bude považovat vaši stránku za vrchol amatérství.
Přizpůsobte rychlost pohybu textu pro pohodlné čtení. Sami si to vyzkoušejte, jak se vám bude číst rychlý text.
Text by se měl plynule posouvat a nikoli skákat po velkých mezerách
<MARQUEE> lze pochopitelně vložit a použít v buňce tabulky <TABLE>.
Pokud určujete pozadí textu v tagu </MARQUEE> pomocí BGCOLOR, nezapomeňte zkontrolovat, zdali je posouvaný text dostatečně čitelný.
Tag <MARQUEE> vám umožňuje nejenom posouvání textu vlevo a vpravo, ale i směrem nahoru a dolu, stačí vložit parametr DIRECTION a atribut Up nebo Down (např. direction=“up“). V takovém případě nezapomeňte vložit parametr HEIGHT s určením velikosti oblasti, kde se bude text posouvat.
Nezapomínejte používat parametr SCROLLAMOUNT, pomocí kterého můžete docílit skutečně jemného pohybu textu. Pokud není uveden, použije se implicitní hodnota 6 pixelů. Ideální je použít hodnotu 1 pixel.
Mnoho lidí si to neuvědomuje, ale pomocí <MARQUEE> můžete posunovat jakýkoli objekt (třeba obrázek), nikoli jenom text. Stačí umístnit obrázek mezi tagy <MARQUEE> a </MARQUEE> a je to.

Doufám, že vám tento článek pomohl objasnit pohyb textu a obrázků pomocí HTML.