Variatie met HTML Marquee

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>







Uitgewerkte voorbeelden

Rijzende Zon


Een digitale afbeelding (geldt ook voor foto's) bestaat uit pixels.
Een pixel (het woord is ontstaan als samentrekking van picture element) is het kleinste onderdeel van een digitale afbeelding. Elk vakje kan een unieke kleur krijgen, waardoor de afbeelding ontstaat.

Het zonnetje op de afbeelding links is 10 x vergroot weergegeven, waardoor de afzonderlijke pixels duidelijk zichtbaar zijn. De afmeting in pixels is 28 pixels breed en 28 pixels hoog.
 
Het is van belang te weten hoe groot de afbeelding in pixels is om te kunnen berekenen hoe groot de tabel moet worden.
 Zonnetje op ware grootte


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.
(tussenruimte = 60 px - plaatje = 28 px)
breedte wordt 5 x 60 + 6 x 28 = 468 px
Hoogte 28 px (afm van het plaatje)






















Maak nu van je afb 5  lange stroken elk 468 pixels breed.
Laat op elke strook de afb 60 pixels opschuiven (de tussenruimte)



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.
Elke strook blijft 468 pixels breed.























Zet een passende afbeelding als achtergrond in de tabel.
Wanneer de border  0 pixels groot is ziet het eindresultaat er zo uit.

Succes!


















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.




Fotopresentatie Dierentuin

Tabel 1.


Uitleg tabel 1. Met het element 'marquee' geplaatst voor elke fotoreeks schuiven de foto's door de cel.
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.




Met het attribuut behavior="alternate" beweegt de fotoreeks heen en weer. (wordt alleen door  ms internet explorer ondersteund.)






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.





















































Omhoog    Terug naar de tutorials


 
© 2004-2009   Auteur:  Margriet Schuitemaker  www.margrietha.nl/cursussen

Gebruik van deze lessen is geheel voor eigen risico, auteur en Kellerhuis.com aanvaarden geen aansprakelijkheid voor schade toegebracht aan hard- of software.