HTML-Hajen

Rulletekster og tekster der flyder rundt









Hvad går det ud på?

Til nyere browsere, der kan håndtere CSS3 findes der en tag der hedder MARQUEE, dvs. en markise, som kan lave rulletekster og tekster der ligger og flyder rundt i et område. Fordi det er en CSS3 feature, skal man være opmærksom på, at brugere med ældre browsere ikke altid kan se teksten eller effekten. Det er mest attributterne der er problemet. Selve tag'en går tilsyneladende tilbage til HTML 4.01, men den nuværende form med alle attributter er ny. Derfor: sørg for at teste at den ønskede effekt fungerer så langt tilbage i browserversionerne som du finder nødvendigt.

Der er til tag'en flg. attributter:

behaviorSætter hvordan teksten scroller i markisen. Der er tre værdier som attributten kan antage: scroll, slide og alternate. Defaultværdien er.
bgcolorSætter baggrundsfarven. HTML 5 er generelt ikke så begejstret for denne attribut, og det kan laves med en STYLE="background-color:", så brug STYLE i stedet.
directionSætter retningen på scrollingen i markisen. Attributten kan have flg. værdier: left, right, up, down. Defaultværdien er left.
heightSætter højden, enten i px, em, cm eller mm. HTML 5 er generelt ikke så begejstret for denne attribut, og det kan laves med en STYLE="height:", så brug STYLE i stedet.
hspaceSætter den horisontale margin. HTML 5 er generelt ikke så begejstret for denne attribut, og det kan laves med en STYLE="margin:", så brug STYLE i stedet.
loopSætter antallet af gange markisen scroller over skærmen. Defaultværdien er -1, dvs. markisen fortsætter uendeligt.
scrollamountStyrer hvor mange pixels markisen flytter sig ad gangen. Defaultværdien er 6.
scrolldelaySætter intervallet mellem hver bevægelse i scrollingen, i millisekunder. Defaultværdien er 85 og minimumsværdien er 60. Værdier under 60, bliver af browserne sat op til 60, med mindre man deklarerer TRUESPEED.
truespeedSom udgangspunkt bliver værdier for SCROLLDELAY under 60 sat op til 60, men hvis man deklarerer TRUESPEED, accepteres den lavere værdi. TRUESPEED har ikke nogen værdi, f.eks. TRUESPEED="yes", som man kunne forvente, så der skal blot stå TRUESPEED i tag'en, og så fungerer det.
vspaceSætter den vertikale margin. HTML 5 er generelt ikke så begejstret for denne attribut, og det kan laves med en STYLE="margin:", så brug STYLE i stedet.
widthSætter bredden, enten i px, %, em, cm eller mm. HTML 5 er generelt ikke så begejstret for denne attribut, og det kan laves med en STYLE="width:", så brug STYLE i stedet.


Der er til tag'en flg. event handlers:

onbounceUdføres når markisen har nået enden af sin scrolling. Denne kan kun udføres når BEHAVIOR er sat til alternate.
onfinishUdføres når markisen er scrollet over skærmen det specificerede antal gange. Fungerer kun når LOOP attributten er sat til en værdi over 0.
onstartStarter når markisen begynder at scrolle.


Der er til tag'en flg. methods:

startStarter markisens scrolling. Virker ikke for alle browsere.
stopStopper markisens scrolling. Virker ikke for alle browsere.


Lad os se på nogle eksempler, så det giver mening.


Hvordan ser det ud?

Eksemplerne her er lavet med ren tekst, men der er ikke begrænsninger på hvad man kan indsætte i markisen.

Hvis vi starter med attributten BEHAVIOR:

Denne tekst er sat med scroll.

Denne tekst er sat med slide.

Denne tekst er sat med alternate.

Bemærk, at slide gør at teksten kun ruller ind på plads.


Attributten DIRECTION styrer retningen:

Denne tekst er sat med DIRECTION="right".

Denne tekst er sat med DIRECTION="down".


Attributten SCROLLAMOUNT styrer hvor mange pixels markisen flytter sig ad gangen. Jo lavere setting des jævnere scrolling, men det får også hastigheden til at falde, så her skal der kompenseres. Optimal værdi for SCROLLAMOUNT skal findes sammen med hastigheden SCROLLDELAY:

Denne tekst er sat med SCROLLAMOUNT="2".

Denne tekst er sat med SCROLLAMOUNT="8".


Attributten SCROLLDELAY styrer hvor lang tid der skal gå mellem flytningerne af teksten, dvs. scrollhastigheden. På denne attribut er der forskelle mellem browserne, så her skal man være opmærksom på, at man får testet på alle browsere.

Talværdien der angives, er tiden mellem flytninger i millisekunder, så jo lavere værdi des højere hastighed. SCROLLDELAY tillader ikke uden videre tider under 60 millisekunder, så hvis man specificerer f.eks. 25 millisekunder, bliver hastigheden sat til 60 på nogle browsere. Hvis man skal bruge kortere/hurtigere flytninger end de 60 millisekunder, så det fungerer på de mest udbredte browsere, kan man erklære en TRUESPEED, som er en attribut uden variabler. Man skriver kort og godt TRUESPEED i tag'en (se eksemplet længere nede). Optimal værdi for SCROLLDELAY skal findes sammen med SCROLLAMOUNT, som specificerer hvor langt indholdet skal flyttes hver gang.

Et par eksemper:

Denne tekst er sat med SCROLLDELAY="60".

Denne tekst er sat med SCROLLDELAY="50".

Denne tekst er sat med SCROLLDELAY="50" TRUESPEED.


ONBOUNCE er en event triggered attribut, ligesom ONCLICK og ONMOUSEOVER. Når objektet rammer kanten og skifter retning, udføres en handling. Her er det et lille JavaScript, der ændrer baggrundsfarven (rød/grøn), når objektet rammer kanten:

Farveskift ved bounce.


ONSTART og ONFINISH gør nøjagtigt det samme, bortset fra at ONSTART kun starter den ene gang, nemlig når markisen begynder at rulle, og ONFINISH først udfører handlingen, når markisen stopper. Disse tre attributter fungerer ikke ved alle browsere, så generelt må det anbefales ikke at anvende disse.


Markisen kan startes og stoppes med et JavaScript. Det kan f.eks. være en knap, eller blot noget MOUSEOVER. I sin oprindelige form er det meningen, at man starter og stopper med this.start() og this.stop(). Det kunne se således ud i koden:

<MARQUEE ONMOUSEOVER="this.stop()" ONMOUSEOUT="this.start()" BEHAVIOR="alternate">Denne tekst stopper (måske) ved MOUSEOVER.</MARQUEE>

På skærmen ser det således ud:

Denne tekst stopper (måske) ved MOUSEOVER.

Dette fungerer imidlertid ikke ved alle browsere, så den officielle løsning duer reelt ikke. Heldigvis er der en workaround. Man kan lave en setAttribute() på SCROLLAMOUNT til 0, når objektet skal stoppes, og en tilsvarende setAttribute() på SCROLLAMOUNT når objektet skal fortsætte. I sig selv er det ikke en god løsning, da ikke alle browsere håndterer kommandoen lige pænt og det står og flimrer ved stop, men ved at kombinere de to måder at stoppe scrollingen på, får man et pænt resultat der virker på alle browserne.

Koden til dette kunne se således ud:

<MARQUEE SCROLLAMOUNT="5" ONMOUSEOVER="this.setAttribute('SCROLLAMOUNT', 0); this.stop()" ONMOUSEOUT="this.setAttribute('SCROLLAMOUNT', 5); this.start()" BEHAVIOR="alternate" >Denne tekst stopper ved MOUSEOVER.</MARQUEE>

Af uransagelige grunde er rækkefølgen af de to måder at stoppe på vigtigt. Hvis man bytter om på rækkefølgen, er fungerer det ikke med Firefox. På skærmen ser det således ud:

Denne tekst stopper ved MOUSEOVER.

Kombinationer/tekst der sejler rundt

Fordi der ikke er en begrænsning på hvad man kan have i en MARQUEE, kan man, ved at indsætte én MARQUEE ind i en anden, få en effekt af tekst/objekt der flyder rundt i et område. Begge MARQUEE har BEHAVIOR="alternate" så teksten flytter sig frem og tilbage i bevægelsesretningen og en MARQUEE får teksten til at scrolle vandret, mens den anden får teksten til at scrolle vertikalt.

Så kunne koden se således ud:

<MARQUEE DIRECTION="down" BEHAVIOR="alternate" STYLE="width:400px; height:300px">
<MARQUEE BEHAVIOR="alternate">Denne tekst flyder rundt.</MARQUEE>
</MARQUEE>

På skærmen kommer det til at se således ud:

Denne tekst flyder rundt.

Ved at lege lidt med f.eks. kun at have BEHAVIOR="alternate" på den vertikale bevægelse og forskellige hastigheder i de to retninger, kan man opnå nogle lidt mere spøjse effekter, f.eks.:

Denne tekst flyder rundt og gennem.