Lichtkrant

Handleiding HTML
Inhoud   Index


In dit onderdeel komen aan de orde Introductie, Elementen, Weergave lichtkrant, Het gebruik van stijlen en Lichtkrant verbergen.


Introductie

Alleen door Microsoft Internet Explorer 2.0 en hoger wordt de Scrolling Text Marquee ondersteund, ofwel de lichtkrant met verschuivende tekst. Je maakt zo'n lichtkrant met behulp van het MARQUEE element.

Door de wijze waarop een lichtkrant met het MARQUEE element wordt opgebouwd, is de weergave in andere browsers minder gelukkig: de tekst welke Microsoft Internet Explorer in een lichtkrant weergeeft, zie je in een andere browser als stilstaande tekst. Vooral als de tekst wat langer is en/of een groter lettertype wordt gebruikt, levert dit een weinig fraai beeld op. Enkele mogelijkheden om deze ongewenste weergave te voorkomen, worden bij de voorbeelden besproken.

Wanneer je een lichtkrant wilt opnemen welke ook in andere browsers zichtbaar is, dan moet je gebruik maken van een Java applet of een JavaScript. Bij de voorbeelden in het onderdeel Objecten wordt een applet gedemonstreerd, welke ook als lichtkrant toegepast kan worden. Bij de JavaScript voorbeelden zijn enkele scripts voor een lichtkrant opgenomen.


Elementen

Voor het maken van een lichtkrant is het volgende element beschikbaar:

MARQUEE




Het element en de bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.


Weergave lichtkrant

In Microsoft Internet Explorer 2.0 en hoger kun je een lichtkrant maken met behulp van het MARQUEE element. Omdat in het volgende voorbeeld geen attributen aan het MARQUEE element zijn toegevoegd, gebruikt de lichtkrant de totale beschikbare breedte.

<P><MARQUEE>Dit is een lichtkrant</MARQUEE></P>

Bekijk de weergave in een nieuw venster.

De attributen HEIGHT, WIDTH en BGCOLOR kunnen gebruikt worden om de hoogte, breedte en achtergrondkleur van de lichtkrant te specificeren. Omdat het MARQUEE element geen attribuut heeft om de opmaak van de tekst in de lichtkrant te bepalen, moet hiervoor gebruik gemaakt worden van de elementen voor tekstopmaak. In het volgende voorbeeld is het FONT element opgenomen met de attributen SIZE, FACE en COLOR. Door Microsoft Internet Explorer 3 worden elementen, welke binnen het MARQUEE element geplaatst worden, niet ondersteund. Daarom sluit het FONT element niet alleen de tekst in, maar ook het MARQUEE element.

<P><FONT SIZE="+2" FACE="Arial" COLOR="red">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC">Dit is een lichtkrant</MARQUEE>
</FONT></P>

Bekijk de weergave in een nieuw venster.

Met het BEHAVIOR attribuut kun je bepalen hoe de tekst door de lichtkrant moet schuiven. Bij de standaardwaarde "scroll" komt de tekst aan de ene kant op, verschuift naar de andere kant en verdwijnt daar geleidelijk weer. Bij de waarde "slide" komt de tekst aan de ene kant op, verschuift naar de andere kant en blijft daar stilstaan (in Microsoft Internet Explorer 4 werkt de waarde "slide" alleen zoals beschreven is, als ook het LOOP attribuut gebruikt is met de waarde "1"; in andere gevallen verdwijnt de tekst aan het eind in één keer). De waarde "alternate" laat de tekst binnen de lichtkrant heen en weer bewegen.

<P><FONT SIZE="+2" FACE="Arial" COLOR="white">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699" BEHAVIOR="alternate">Dit is alternate</MARQUEE>
</FONT></P>

Bekijk de weergave in een nieuw venster.

Met het SCROLLAMOUNT attribuut kan worden vastgelegd hoeveel pixels de tekst bij elke beweging moet verschuiven. Hoe hoger de waarde, hoe langzamer de lichtkrant lijkt te lopen.

<P><FONT SIZE="+2" FACE="Arial" COLOR="white">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699" SCROLLAMOUNT="5">Hier verschuift de tekst weinig</MARQUEE>
</FONT></P>

Bekijk de weergave in een nieuw venster.

Met het SCROLLDELAY attribuut kan worden vastgelegd om de hoeveel tijd (uitgedrukt in milliseconden) de tekst een stukje moet verschuiven. Hoe hoger de waarde, hoe langzamer de lichtkrant loopt.

<P><FONT SIZE="+2" FACE="Arial" COLOR="white">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699" SCROLLDELAY="150">Hier verschuift de tekst langzaam</MARQUEE>
</FONT></P>

Bekijk de weergave in een nieuw venster.


Het gebruik van stijlen

In Microsoft Internet Explorer 3.0 en hoger kan de opmaak van de tekst in de lichtkrant ook bepaald worden met behulp van Cascading Style Sheets. In het volgende voorbeeld is gebruik gemaakt van een inline stijl, door het STYLE attribuut aan het MARQUEE element toe te voegen. Met de font-family eigenschap is het lettertype gespecificeerd, met de font-size eigenschap de lettergrootte en met de color eigenschap de kleur van de tekst.

<P><MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699" STYLE="font-family: Arial; font-size: 18pt; color: white">
De opmaak ... Sheets.
</MARQUEE></P>

Bekijk de weergave in een nieuw venster.


Lichtkrant verbergen

Omdat de tekst in de lichtkrant als inhoud van het MARQUEE element moet worden opgenomen, wordt deze stilstaand en compleet zichtbaar weergegeven door browsers, die het MARQUEE element niet ondersteunen. Vaak is het resultaat niet bijzonder fraai, zoals in het volgende voorbeeld.

<P><FONT SIZE="+2" FACE="Arial" COLOR="red">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC">Tekst ingesloten ... stilstaande tekst.</MARQUEE>
</FONT></P>

In een browser die het MARQUEE element niet ondersteunt zie je:

Tekst ingesloten door het MARQUEE element wordt door Microsoft Internet Explorer 2.0 en hoger weergegeven in een lichtkrant, door andere browsers als stilstaande tekst.

Wanneer in de lichtkrant de kleur voor de tekst ook nog eens hetzelfde is als de achtergrondkleur van het document, dan zie je slechts een blanco ruimte in browsers, die het MARQUEE element niet ondersteunen.

<P><FONT SIZE="+2" FACE="Arial" COLOR="white">
<MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699">Deze tekst ... stilstaande tekst.</MARQUEE>
</FONT></P>

In een browser die het MARQUEE element niet ondersteunt zie je:

Deze tekst wordt door Microsoft Internet Explorer 2.0 en hoger weergegeven in een lichtkrant, door andere browsers als stilstaande tekst.

Bovenstaande effecten kun je enigszins beperken door de opmaak van de tekst in de lichtkrant vast te leggen met behulp van het STYLE attribuut. In andere browsers wordt de inhoud van het MARQUEE element dan als standaard tekst weergegeven.

<P><MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699" STYLE="font-family: Arial; font-size: 18pt; color: white">
Deze tekst ... stilstaande tekst.
</MARQUEE></P>

In een browser die het MARQUEE element niet ondersteunt zie je:

Deze tekst wordt door Microsoft Internet Explorer 2.0 en hoger weergegeven in een lichtkrant, door andere browsers als stilstaande tekst.

Omdat Microsoft Internet Explorer 2 geen stijlen ondersteunt, zal deze de tekst in de lichtkrant ook in de standaard lettergrootte en kleur weergegeven.

Een oplossing voor het geheel verbergen van de inhoud van de lichtkrant in browsers die het MARQUEE element niet ondersteunen, is het gebruik van een JavaScript. Het principe is eenvoudig: het script test om welke browser het gaat en plaats de HTML-code voor de lichtkrant alleen als de browser Microsoft Internet Explorer is. Uiteraard wordt de lichtkrant alleen weergegeven als de gebruiker de uitvoering van JavaScript heeft toegestaan.

In de body van het document staat het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
if (navigator.userAgent.indexOf("MSIE") != -1) {
document.write('<P><FONT SIZE="+2" FACE="Arial" COLOR="white"><MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#336699">Deze lichtkrant is opgebouwd met behulp van een JavaScript<\/MARQUEE><\/FONT><\/P>')
}
//-->
</SCRIPT>

Zorg er voor dat de code tussen de haakjes achter document.write niet onderbroken wordt door een harde overgang naar de volgende regel.

Bekijk de weergave in een nieuw venster.

Omdat Microsoft Internet Explorer 2 inline frames noch JavaScript ondersteunt, wordt een lichtkrant bij de genoemde oplossingen ook in deze browser niet weergegeven. Gezien het waarschijnlijk zeer geringe aantal gebruikers van Internet Explorer 2 hoeft dat geen belemmering te zijn.


  Inhoud Handleiding HTML   Index   Inhoud Lichtkrant


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 8 oktober 1999
Copyright © 1995-2000 Hans de Jong