Browser-onafhankelijke <marquee> III: Foto's verticaal

De bedoeling van deze pagina is zonder verdere toelichting wel duidelijk. Op deze pagina wordt beschreven hoe je dit aanpakt.

Elke keer als je pagina opent begint de lichtkrant met een andere foto. Als je met de muis over de lichtkrant beweegt, of als je de lichtkrant aantikt op een aanraakschem, stopt de beweging.
Als je op een aanraakscherm ergens in de tekst tikt, loopt de lichtkrant verder.

Deze lichtkrant is gemaakt op basis van een horizontale uitvoering. Je vindt die in het item "Browser-onafhankelijke marquee II: Foto's".

De code staat onder aan deze pagina. Je kunt hem downloaden om zelf te gebruiken.

• Het script bestaat uit twee stukken JavaScript, aangevuld met de plaatjes die je wilt laten zien en een plaatje om de horizontale scheidingsbalk mee te maken.
   
• Het eerste stuk JavaScript staat in de file marquee1v.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 marquee2v.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 marquee2v.js niet te wijzigen.
• Je kunt de lichtkrant aan de linkerkant of aan de rechterkant van de web-pagina laten verschijnen. Dat regel je met de tag <div style="float:left"> resp. <div style="float:right">. Zie ook de code onderaan de bladzijde.
• Het opmaken van de lichtkrant gaat met een aantal variabelen. Die staan in de file marquee1v.js, die dus moet worden aangepast. Zie de onderstaande tabel:
   

  Naam		Betekenis
  marqueewidth		String. Breedte van de marquee, in pixels. Hier: marqueewidth = "134px"
  marqueeheight		String. Hoogte van de marquee, in pixels. Hier: marqueeheight = "500px"
  margin_left		String. Breedte van de witruime links van de marquee, in pixels. Hier: margin_left = "0px"
  margin_right		String. Breedte van de witruime rechts van de marquee, in pixels. Hier: margin_right = "50px"
  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)
  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_yy', zie de beschrijving hieronder. Als separatorimage = 'no' wordt 'plaatje_yy' 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 marquee1v.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 breed zijn. De breedte van de plaatjes moet gelijk zijn aan marqueewidth.
  • De plaatjes moeten allemaal in zelfde (sub-)directory staan.
  • De hoogte mag per plaatje verschillen. Maak in dat geval (als dat mogelijk is) de kleur van plaatje_y gelijk aan de achtergrondkleur van de andere plaatjes. Dat voorkomt dat het beeld onrustig wordt. Laat plaatje_yy anders weg, zoals hierboven is beschreven.
    Kies in andere gevallen voor plaatje_yy een kleur die past bij de plaatjes en de opmaak van de website.
    Maak plaatje_yy niet te hoog. 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 10 à 15 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="marquee1v2.js"></script>

<div style="float:left">
<script src="marquee2v2.js"></script>
</div>

onLoad="populate()"

Downloaden:
 
Druk op de knop:  File: voorb215.zip, 68 004 bytes.

Opmerking:
 
Een versie van deze lichtkrant, waarbij de plaatjes van boven naar beneden lopen, is eveneens beschikbaar. Zie daarvoor het item Browser-onafhankelijke <marquee> IV: Foto's verticaal II.