Rulletekster og tekster der flyder rundt

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:

behavior	Sætter hvordan teksten scroller i markisen. Der er tre værdier som attributten kan antage: scroll, slide og alternate. Defaultværdien er.
bgcolor	Sæ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.
direction	Sætter retningen på scrollingen i markisen. Attributten kan have flg. værdier: left, right, up, down. Defaultværdien er left.
height	Sæ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.
hspace	Sæ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.
loop	Sætter antallet af gange markisen scroller over skærmen. Defaultværdien er -1, dvs. markisen fortsætter uendeligt.
scrollamount	Styrer hvor mange pixels markisen flytter sig ad gangen. Defaultværdien er 6.
scrolldelay	Sæ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.
truespeed	Som 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.
vspace	Sæ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.
width	Sæ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:

onbounce	Udføres når markisen har nået enden af sin scrolling. Denne kan kun udføres når BEHAVIOR er sat til alternate.
onfinish	Udfø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.
onstart	Starter når markisen begynder at scrolle.

Der er til tag'en flg. methods:

start	Starter markisens scrolling. Virker ikke for alle browsere.
stop	Stopper markisens scrolling. Virker ikke for alle browsere.

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

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:


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


Attributten DIRECTION styrer retningen:



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:



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:



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:



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:


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


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:


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:

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:


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


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.: