logo
  Marquee
  De marquee tag is oude bekende die te pas en te onpas werd gebruikt. Maar met een beetje beleid kunnen we hem ook op de website zetten en er véél meer mee doen dan alleen maar <marquee></marquee> gebruiken. Kijk en lees maar eens hieronder wat je er allemaal eigenlijk mee kan.

1 Hier staat nummer een van de marquee
.
2 Hier staat nummer twee van de marquee
.
3 Hier staat nummer drie van de marquee
.
4 Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee
Hier staat nummer vier van de marquee

.
5 blub

Met de marquee tag kan je veel meer dan alleen een beetje heen en weer laten gaan:

1: Hier komt ie voor de dag en blijft dan gewoon staan:
<marquee scrollamount="2" behavior="slide" direction="left">tekst</marquee>

2: Van rechts naar links:
<marquee scrollamount="2" behavior="scroll" direction="left">tekst</marquee>

3: Heen en weer:
<marque scrollamount="2" behavior="alternate">tekst</marquee>

4: Van beneden naar boven:
<marque scrollamount="2" behavior="scroll" direction="up">tekst</marquee>

5: Ook kan je er een image in zetten of gewoon een link:
<marquee scrollamount="1" behavior="scroll" direction="left"><img src="jou image" width="20" height="20" alt="blub" /></marquee>

Je ziet er ook tussen staan scrollamount="1", dit is de regelbare snelheid. 1 Is heel traag en 10 zeer snel.

Je kan het ook zo maken dat als iemand er met de muis op klikt en vast houdt, dat ie stil blijft staan:

Hou me vast door met je linkermuisknop op mij te drukken en ingedrukt te houden

<marquee scrollamount="3" behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">tekst</marquee>

Je kan het ook zo maken dat je niet met je muis hoeft te klikken maar er gewoon alleen met je pijltje er over gaan:

Ga eens hier staan met je pijltje, niet klikken

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">tekst</marquee>

Er zijn nog meer smaken die je met marquee kan doen, wat dacht je er van deze:

Druk op het knopje
<marquee scrollamount="3" behavior="scroll" direction="left" id="mymarquee">tekst</marquee><br />
<input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();">
<input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">

Je kan ook de bezoeker de marquee dit langzamer laten gaan en dat kan op twee manieren:

Hou me vast dan ga ik langzamer

<marquee behavior="scroll" direction="left" scrollamount="12" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 12, 0);">
tekst</marquee>

Je kan dit ook doen met een mouse-over:

Kom eens hier staan met je muispijltje

<marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">tekst</marquee>

Hoe de inhoud moet gaan:


De volgende waarden kunnen dus worden gebruikt:
scroll: de tekst gaat van de ene kant naar de andere kant en verdwijnt weer omvervolgens opnieuw te beginnen
slide: de tekst van de ene kant en schuift naar de andere kant en blijft daar staan
alternate: de tekst schuift steeds heen en weer.
<marquee behavior="scroll | slide | alternate"> </marquee>

Achtergrond:


Je kan ook een achtergrond maken bij een marquee, alleen is het wel oppassen dat de tekst goed te lezen is en dat doe je als volgt:

hier de tekst

<marquee bgcolor="#95B4E0"> </ marquee> <marquee bgcolor="#95B4E0">tekst</ marquee>

Welke richting:


tekst

 

<marquee direction="left | right | up | down"> </marquee> De volgende waarden kunnen gebruikt worden:


left: de tekst beweegt van rechts naar links (dit is de standaardwaarde)
right: de tekst beweegt van links naar rechts.
up: de tekst beweegt van beneden naar boven.
down: de tekst beweegt van boven naar beneden.

Hoogte:


<marquee height="20px">tekst</marquee>
De hoogte is een getal in pixels of een percentage dat de hoogte ten opzichte van de totale venster- of framehoogte vastlegt.

tekst

Hoeveel keer laten zien:


Met loop bepaal je hoe vaak de tekst verschijnen.
<marquee loop="waarde">tekst</marquee>
De waarde is een getal. Indien het LOOP attribuut niet wordt gebruikt, of voor de waarde -1 wordt opgenomen, dan blijft de tekst in de lichtkrant continue doorlopen.

test

Snelheid:


Met de snelheid instellingen doe je met het scrollamount.
De opbouw is:
<marquee scrollamount="1 t/m ...">test</marquee> test

Dit kan ook met scrolldelay:

<marquee scrolldelay="waarde"> </marquee>

test

Deze geeft de tijd aan in milliseconden.

Ruimte onder en boven de lichtkrant:


Met vspace wordt de ruimte bepaald boven en onder deze lichtkrant. Dus als je boven of onder deze lichtkrant een tekst hebt staan dan kan je deze gebruiken en wordt voorkomen dat de overige inhoud van het document te dicht tegen de lichtkrant wordt geplaatst. Wat je invult is in pixels zoals je hieronder kan zien

<marquee vspace="50px">test</marquee>

test

Breedte:


Met width bepaal je de breedte van de lichtkrant.
<MARQUEE WIDTH="200px"> </MARQUEE>
Je kan zowel pixels invullen als %

 
eind