Ben's Hobbyhoekje -- Lichtkrant met marquee

Lichtkrant met <marquee>

Dit verhaal is verouderd. In de specificaties van HTML 4 en HTML5 komt de <marquee>-tag niet (meer) voor, maar er wordt gesteld dat een marquee kan worden gemaakt met behulp van CSS.
In de code van wat oudere websites kun je dit nog tegenkomen, daarom blijft dit nog even staan. Het wordt echter niet meer onderhouden en er wordt ook geen ondersteuning voor gegeven.

Het is mogelijk een fraaie lichtkrant over het scherm te laten rollen. Hier staat beschreven hoe je dat aanpakt.

Hieronder staat een aantal voorbeelden van wat je met <marquee> kunt doen. De code met een beschrijving volgt hierna.
De kaders rond de figuren zijn gemaakt met behulp van een <table>.

Van beneden naar boven	Van rechts naar links	Van links naar rechts	Van boven naar beneden
	Heen en weer
	Van rechts naar links
	Van links naar rechts

<marquee> maakt geen deel uit van de HTML-specificaties, maar is een Microsoft-extension die tegenwoordig door de meeste browsers bijna volledig wordt ondersteund.
De hier gegeven beschrijving is slechts summier.
Alleen de hier getoonde mogelijkheden worden beschreven.
<marquee> beperkt zich niet tot alleen tekst. Door bij de scrollende tekst <img>-tags op te nemen kun je ook plaatjes gebruiken, zoals hieronder.
Plaatjes

De code ziet er als volgt uit:

("Van beneden naar boven" en "Van boven naar beneden")

<marquee behavior="scroll" direction="up" bgcolor="#C0C0C0"
width="120" height="150" hspace="10" vspace="10" loop="">Van beneden naar boven</marquee>
<marquee behavior="scroll" direction="down" bgcolor="#FFFFFF" width="120" height="150" loop="-1">Van boven naar beneden</marquee>

Dit zijn verticaal scrollende lichtkranten. Die maak je met behavior="scroll" in combinatie met direction="down" respectievelijk direction="up".
De grootte van het venster waarin de lichtkrant loopt stel je in met width="..." en height="....". De ruimte die vrij moet blijven rondom de lichtkrant stel je in met hspace="..." en vspace="...". Deze vier opgeven in pixels (beeldpunten).
De achtergrondkleur van het venster waarin de lichtkrant loopt wordt ingesteld met bgcolor="......"
De kleur van de letters is hier ingesteld met een <FONT>-tag.
Het aantal malen dat de lichtkrant loopt stel je in met loop="...". Met loop="10" zal de lichtkrant 10 maal lopen en dan stoppen. Om de lichtkrant oneindig door te laten gaan gebruik je loop="" of loop="-1".

Opmerking: Om het in de browser Opera goed te laten werken MOET je het het attribuut loop opgeven. Als je dat weg laat loopt de lichtkrant één keer in Opera en loopt de lichtkrant oneindig door in andere browsers. Als je loop="-1" opneemt, omzeil je dit probleem.

("Van links naar rechts" en "Van rechts naar links" -- bovenaan)

<marquee behavior="scroll" direction="left" width="120" height="20"
loop="-1" class="Opmerk-g">Van rechts naar links</marquee>

<marquee behavior="scroll" direction="right" bgcolor="#FFFF00"
width="120" height="20" loop="-1" class="Kop3">Van links naar
rechts</marquee>

Dit zijn twee "normale" lichtkranten. Dat wordt gemaakt behavior="scroll" in combinatie met direction="left" respectievelijk direction="right".
De lettergrootte en -kleur worden ontleend aan de classes "Opmerkg-g" en "Kop3" . Die zijn gedefinieerd in het stylesheet (.CSS) dat op deze bladzijde wordt gebruikt.

("Heen en weer")

<marquee behavior="alternate" width="240" height="20" loop="-1">Heen
en weer</marquee>

Hier is behavior="alternate" gebruikt. De tekst gaat heen en weer binnen het venster.

("Van links naar rechts" en "Van rechts naar links" -- onderaan)

<marquee behavior="slide" direction="right" width="240" height="20">Van links naar rechts</marquee>

<marquee behavior="slide" direction="left" width="240" height="20"
scrolldelay="255">Van rechts naar links</marquee>

Hier wordt behavior="slide" gebruikt. De tekst komt, afhankelijk van de instelling van direction, het beeld binnenschuiven en blijft dan staan. loop="...." werkt hier niet.

Met scrolldelay kun je de loopsnelheid van de lichtkrant veranderen. Met scrolldelay stel je de tijd in die de browser wacht totdat het volgende karakter wordt getoond. Normaal is dat 85 ms. Door een groter getal te kiezen wacht de browser langer en loopt de lichtkrant dus langzamer.

Opmerking:

Een andere methode voor het maken van een lichtkrant is met behulp van JavaScript. Twee verschillende benaderingen daarvoor worden beschreven in de items "Lichtkrant in een venster" en "Browser-onafhankelijke <marquee>".

Bedenk dat steeds weer herhalende beweging op het scherm al gauw irriteert. Maak de lichtkrant niet te lang en zet er niet meer dan één op een pagina. Houd ook het aantal pagina's van je site waarop een lichtkrant staat beperkt.