Het HTML-marquee element wordt in diverse documenten beschreven welke veelvuldig op internet te vinden zijn.
Hier wordt vrijwel altijd uit gegaan van het gebruik van marquee voor lichtkranten met tekst.
Op deze pagina wordt beschreven hoe marquee toegepast kan worden voor afbeeldingen, zoals een eenvoudig GIF-plaatje.
Marquee kan ook toegepast worden voor JPG-afbeeldingen, zoal b.v. digitale foto's.
De toepassing wordt met een paar voorbeelden zichtbaar gemaakt.
Het element 'marquee' kent 'attributen' die de werking beïnvloeden, b.v. 'direction' voor richting, 'scrolldelay' voor snelheid en 'height' voor hoogte.
De attributen hebben een 'waarde'. Het element, attribuut en de waarde moeten tussen haken gezet worden.
b.v.<marquee direction="right">
| Voor bewegen naar
links <marquee>XXX</marquee> |
Voor bewegen naar
boven <marquee direction="up"> Met een vaste hoogte <marquee height="100" | |
|
||
| Voor bewegen naar
beneden <marquee direction="down"> Met een vaste hoogte <marquee height="100"> |
Voor bewegen naar
rechts <marquee direction="right"> |
De paarse tekst geeft aan, dat de eigenschappen die bij de afbeelding horen, allemaal tussen <marquee> en </marquee> geplaatst moeten worden.
| v.b. <marquee
direction="right"><img
src="bal.gif"alt=""width="28"height="28"></marquee> v.b. <marquee behavior="alternate"><img src="bal.gif"alt=""width="28"height="28"></marquee> v.b. <marquee behavior="slide"><img src="bal.gif"alt=""width="28"height="28"></marquee> v.b. <marquee scrolldelay="100"><img src="bal.gif"alt=""width="28"height="28"></marquee> |
Enkele voorbeelden van de invloed van de attributen met waarden op het gedrag van marquee.
| <marquee loop="3">XXX</marquee> | |
| De
beweging stopt na 3 keer | |
| <marquee scrolldelay="20">XXX</marquee> | |
| Beweegt elke 20 milliseconden een
stukje | |
| <marquee scrolldelay="200">XXX</marquee> | |
| Beweegt elke 200 milliseconden een
stukje | |
| <marquee scrollamount="2">XXX</marquee> | |
| Verschuift bij elke beweging 2
pixels | |
| <marquee scrollamount="20">XXX</marquee> | |
| Verschuift bij elke beweging 20
pixels | |
| <marquee
behavior="alternate">XXX</marquee> |
|
| Beweegt heen en
weer | |
| <marquee
behavior="slide">XXX</marquee> |
|
| De
afbeelding blijft staan aan het eind van de
cel |
Er kunnen meerdere attributen gelijktijdig gebruikt worden, deze moeten dan allemaal binnen dezelfde haken van marquee geplaatst worden. Combineer en expirimenteer naar hartelust.
| <marquee direction="right" behavior="alternate"
scrolldelay="150" width="400">XXX</marquee> |
|
|
|
|
Bepaal van te voren hoe groot het eindresultaat moet worden, dit is mede afhankelijk van de grootte van de afbeelding die wordt gebruikt. In dit voorbeeld is gekozen voor 5 kolommen en 5 rijen. De breedte van elke cel is in dit voorbeeld 88 pixels dat is de breedte van de afbeelding en de tussenruimte tussen de afbeelding.
Er is uitgegaan van een tussenruimte van 60 pixels. De hoogte wordt bepaald door de afmeting van de afbeelding in pixels.
Er is gekozen om de lengte van afbeelding en tussenruimte 1 keer extra te nemen om een korte pauze te krijgen voordat de hele cyclus zich herhaalt.
Maak een tabel met een gelijk aantal rijen en kolommen. Kies voor een tabelbreedte in pixels = 5 keer de tussenruimte tussen de afb in pixels plus 6 keer de breedte van de afb in pixels. | |||||
|
Maak nu van je afb 5 lange stroken elk 468 pixels breed. |
| |
| |
| |
|
|
|
Met het element 'marquee' lopen de stroken gelijktijdig door de tabel. |
|
| |
|
| |
|
| |
|
|
|
|
Worden de afbeeldingen in de juiste volgorde en in de juiste cel gezet, dan lopen ze nog steeds gelijktijdig door de tabel, maar zijn in de overige cellen niet zichtbaar. | ||||
|
|
|||||
|
|
|||||
Wanneer met bv een fotobewerkings- programma de achtergrondkleur van de afb transparant wordt gemaakt, zie je deze niet meer maar de achtergrond is er wel. | |||||
Zet een passende afbeelding als achtergrond in de tabel. | |||||
Suggestie.
Probeer het ook eens uit met afbeeldingen welke een ongelijk aantal pixels hebben.
Wanneer wordt gewerkt met een serie afbeeldingen welke een ongelijk aantal pixels hebben bv tekst, dient van elke afbeelding afzonderlijk de breedte in pixels te worden bepaald.
Bij het bepalen van de totale breedte van de stroken moet dit in de som worden doorberekend, uiteindelijk moeten alle stroken exact dezelfde breedte krijgen, dit om te voorkomen dat er een verloop optreedt.
Tabel 1.
|
Maak voor elke cel een aparte strook met foto's, het minimaal aantal foto's per strook mag niet kleiner zijn dan het aantal kolommen van de tabel. Belangrijk, zorg dat elke foto even groot is. Plaats voor het mooiste effect een foto als achtergrond in elke cel. |
Laat de foto's op elke strook 1 afbeelding naar rechts opschuiven, plaats de laatste foto vooraan. Maak net zoveel stroken met foto's gelijk aan het aantal kolommen van tabel. | |
|
Tabel 2
Uitleg tabel 2. Met het element 'marquee' geplaatst
voor elke fotoreeks schuiven de foto's door elke cel.
| |
Maak een strook met
foto's, het minimum aantal foto's per strook mag niet kleiner zijn
dan het aantal kolommen van de tabel. Plaats voor het mooiste effect een foto als achtergrond in elke cel. |
Plaats de strook met foto's in elke cel van de tabel. (elke cel krijgt dezelfde strook met foto's) Zorg dat elke foto even groot is. |
|
Spookrijder |
Bewegende GIF-plaatjes 'bewegen' wel maar blijven op hun plaats staan.
 |
 |
|
Worden ze echter tussen <marquee> en </marquee> gezet, dan wordt de suggestie gewekt dat ze echt 'lopen'.
Nog even een richting geven met <marquee direction="right"> en we hebben een spookrijder op de renbaan.
|
 |
Poezen in de
straat |
| Poort
in Zutphen |
De originele foto van een oude poort in Zutphen is in dit voorbeeld bewerkt met een filter in Photoshop.
Er zijn een paar gif-plaatjes van poezen aan toegevoegd. Bij de wandelende poes is het element 'marquee' in al zijn eenvoud toegepast, waardoor deze door de foto loopt.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zonnetje op ware
grootte
