Browser-onafhankelijke <marquee> II: Foto's

De bedoeling is zonder verdere toelichting wel duidelijk. Op deze bladzijde staat beschreven hoe je een dergelijke foto-lichtkrant in je website kunt laten verschijnen.

Elke keer als je pagina opent begint de lichtkrant met een andere foto. Als je met de muis over de lichtkrant beweegt, stopt de beweging.

Deze lichtkrant is oorspronkelijk ontwikkeld voor de website van een van mijn vroegere werkgevers. Daar is het inmiddels vervangen door wat anders, maar het is te leuk om te worden vergeten.
Deze lichtkrant is een variant op de tekst-lichtkrant die is beschreven in het item Browser-onafhankelijke <marquee>.

• Het script bestaat uit twee stukken JavaScript, aangevuld met de plaatjes die je wilt laten zien en een plaatje om de verticale scheidingsbalk mee te maken.
   
• Het eerste stuk JavaScript staat in de file marquee1.js. In dit script wordt de verschijningsvorm van de lichtkrant gedefinieerd. Tevens zorgt dit script voor het laden van de plaatjes. Zet dit in de HEAD van het HTML-bestand.
• Het tweede stuk JavaScript staat in de file marquee2.js. Dit script zorgt voor de beweging op het scherm. Je zet dit in de BODY van het HTML-bestand, op de plaats waar je de lichtkrant wilt laten zien.
• De lichtkrant wordt gestart als de pagina helemaal is geladen. Dat gebeurt met behulp van onLoad, waarmee de function populate() wordt aangeroepen. Zie onderaan deze bladzijde.
   
• Om de lichtkrant te kunnen gebruiken hoef je de file marquee2.js niet te wijzigen.
• Als de lichtkrant gecentreerd of rechts uitgelijnd op het scherm moet komen, moet je de <script>-tag (zie onderaan de bladzijde) tussen <div>-tags zetten:
  <div align="center">, resp. <div align="right">.
   
• Het opmaken van de lichtkrant gaat met een aantal variabelen. Die staan in de file marquee1.js, die dus moet worden aangepast. Zie de onderstaande tabel:
   

  Naam		Betekenis
  marqueewidth		String. Breedte van de marquee, in pixels. Hier: marqueewidth = "550px"
  marqueeheight		String. Hoogte van de marquee, in pixels. Hier: marqueeheight = "100px"
  marqueespeed		Getal tussen 1 en 10. Snelheid waarmee de lichtkrant over het scherm beweegt. Aanbevolen waarde: 3. De lichtkrant loopt niet in alle browsers even snel. Dat geldt met name in FireFox. Ook is de beweging in FireFox een beetje schokkerig. Vermoedelijke oorzaak is dat FireFox wat moeite heeft met het uitvoeren van dit soort scripts. Hier: marqueespeed = 3
  marqueebgcolor		String. RGB-code voor de achtergrondkleur van de lichtkrant. Hier: marqueebgcolor = "#ddffdd" (lichtgroen)
  marqueetextstyle		String. Opmaak van de tekst in de lichtkrant. Gebruik hiervoor CSS-opdrachten. Hier: marqueetextstyle = "color:#800000; font-weight:700; font-size:14pt" (bruin-rode tekst, 14 punten, vet)
  marqueebgtext		String. HTML-code met de achtergrond tekst. Zet hier een &nbsp; (non-breaking space) als de tekst leeg moet blijven. Hier: "&nbsp;<br> Ben's Hobbyhoekje<br>Foto-lichtkrant"
  pauseit		Getal, 0 of 1. Als pauseit = 1 stopt de beweging als de muis over de lichtkrant wordt bewogen, anders reageert de lichtkrant niet op de muis. Hier: pauseit = 1
  pictureprefix		String. Bepaalt naam van de plaatjes in de lichtkrant. Als de plaatjes in een andere directory staan dan de HTML-code kun je hier een relatief path in opnemen. Hier: pictureprefix = "../images/plaatje_"
  picturesufffix		String. Bepaalt het bestandstype, bijv. JPG, GIF, PNG, enz. Hier: picturesuffix = ".jpg"
  numberofpictures		Getal, geeft het aantal plaatjes in de lichtkrant aan. Hier: numberofpictures = 8
  separatorimage		String, 'yes' of 'no'. Als separatorimage = 'yes' komt er tussen de foto's een scheidingsbalk, die gemaakt wordt met het 'plaatje_xx', zie de beschrijving hieronder. Als separatorimage = 'no' wordt het 'plaatje_xx' tussen twee foto's weggelaten. Hier: separatorimage = 'yes'

  
   
• Voor de plaatjes in de lichtkrant geldt het volgende:
   
  • De plaatjes moeten allemaal van hetzelfde type zijn. Dus: alleen JPG, alleen GIF, enz.
    Als je verschillende formaten door elkaar wilt gebruiken kan dat. In dat geval moet je function PictureList() (in file marquee1.js) herschrijven. Dat raad ik niet aan. Handiger is om plaatjes met behulp van grafische software om te zetten in het goede bestandstype. Met MS-Paint kom je al een aardig eind.
  • De plaatjes moeten allemaal even hoog zijn. De hoogte van de plaatjes moet gelijk zijn aan marqueeheight.
  • De plaatjes moeten allemaal in zelfde (sub-)directory staan.
  • De breedte mag per plaatje verschillen. Maak in dat geval (als dat mogelijk is) de kleur van plaatje_xx gelijk aan de achtergrondkleur van de andere plaatjes. Dat voorkomt dat het beeld onrustig wordt. Laat plaatje_xx anders weg, zoals hierboven is beschreven.
    Kies in andere gevallen voor plaatje_xx een kleur die past bij de plaatjes en de opmaak van de website.
    Maak plaatje_xx niet te breed. Op deze site is 10 pixels gebruikt. Dat is eigenlijk wel het maximum. Maar ook dit is natuurlijk een kwestie van smaak.
  • Let op de omvang van de lichtkrant, dat wil zeggen: de som van de bestandsgrootte van alle in in de lichtkrant gebruikte plaatjes. Die moet niet te groot zijn, anders duurt het erg lang om de lichtkrant (en daarmee de hele bladzijde) te laden. Als vuistregel kun je nemen: 500 kB voor een breedbandverbinding en 100 kB met een 'ouderwets' 56K6 modem.
    Opmerking: De lichtkrant op deze bladzijde is ca. 64 kb
   
• Kies het aantal plaatjes in overeenstemming met wat je met de lichtkrant wilt zeggen. Dat wil zeggen: niet te veel plaatjes. Voor de meeste toepassingen volstaan 8 à 10 plaatjes. Maar de boodschap van een lichtkrant van meer dan 30 plaatjes kan ook nog steeds veelzeggend zijn. Dat hangt af van het onderwerp.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script src="marquee1.js"></script>

<script src="marquee2.js"></script>

onLoad="populate()"

Downloaden:
 
Druk op de knop:  File: voorb211.zip, 68 237 bytes.

Opmerking:
 
Van deze lichtkrant bestaat ook een verticale uitvoering. Zie het item "Browser-onafhankelijke marquee III: Foto's verticaal".
 
Er is ook een uitvoering van waarbij de plaatjes heen en weer gaan. Zie het item "Browser-onafhankelijke marquee VI: Heen en weer gaande plaatjes".