Fade effecten met figuren II: Cross Fade

Hieronder zie je drie links en een plaatje. Als je op één van die links klikt vloeit het plaatje over in een ander plaatje. Afhankelijk van de link die je kiest gaat het effect sneller of langzamer.
 

Plaatje wisselen: Snel     Berglandschap bij ondergaande zon
Plaatje wisselen: Middel
Plaatje wisselen: Langzaam

Op deze bladzijde wordt besproken hoe je dat aanpakt.

Het oorspronkelijke script dateert uit 2004. Inmiddels is het script versie 2. Op deze pagina wordt nog versie 1 gebruikt. Die is niet meer beschikbaar op internet. De vereiste bestanden kun je daarom downloaden vanaf deze site, echter zonder de plaatjes.

Het gebruikte JavaScript is gemaakt door een web-ontwikkelaar uit Engeland, Brothercake. Ooit was het een goede vervanging voor de zg. transition-filters, die alleen in oudere versies van Internet Explorer werken, maar het script werkt nog steeds prima!

De leeftijd van het script heeft inmiddels een zij-effect veroorzaakt: de tooltip (de alt-tekst) wordt niet meer getoond als de muispijl over de afbeelding gaat. Dat komt doordat de tooltip-functie in moderne browsers wordt uitgevoerd door het title-attribuut en niet meer door het alt-attribuut.
Om de tooltip weer werkend te krijgen verander je .alt in .title in regel 71 van de file crossfade.js. Daarbij vervang je het alt-attribuut door een title-attribuut in de <img>-tag van het plaatje.
Je kunt natuurlijk ook de attributen alt en title tegelijkertijd veranderen door na regel 71 deze code in te voegen: isf.obj.title = arguments[3];
De alt-tekst en de title-tekst zijn dan steeds gelijk aan elkaar.

Behalve het hier getoonde Cross-fade effect, bevat de pagina van Brothercake ook nog twee andere, vergelijkbare effecten: Swap Fade en Cross Wipe. Die worden ook op deze website besproken.

Het inbouwen in je eigen site gaat als volgt:

Gebruik:

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

<!-- Image transitions by Brothercake - https://www.brothercake.com/ -->
<script src="crossfade.js"></script>
<link rel="stylesheet" href="transitions.css" media="screen, projection">
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<img id="CrossFadeDemo" src="plaatje_0.jpg" alt="Berglandschap bij ondergaande zon" width="134" height="100" border="0">
 
<a href="javascript:crossfade(document.getElementById('CrossFadeDemo'), 'plaatje_5.jpg', '1', 'Zonsondergang in een Berglandschap met een Meer')">Plaatje wisselen: Snel</a>
<a href="javascript:crossfade(document.getElementById('CrossFadeDemo'), 'plaatje_6.jpg', '2', 'Zonsondergang in de Polder')">Plaatje wisselen: Middel</a>
<a href="javascript:crossfade(document.getElementById('CrossFadeDemo'), 'plaatje_7.jpg', '5', 'Zonsondergang aan Zee')">Plaatje wisselen: Langzaam</a>
Om praktische redenen is de code verdeeld over meerdere regels. In je eigen website zou elke regel code op één regel moeten staan.

Downloaden:
 
Druk op de knop: Download deze code  File: voorb261.zip, 2751 bytes.

Opmerking:
 
De website www.brothercake.com bevat nog veel meer opvallende JavaScripts. Ondanks dat de scripts niet meer lijken te worden onderhouden of door-ontwikkeld, is het zeker de moeite waard om daar eens te gaan kijken.

 
terug

html-261; Laatste wijziging: 24 maart 2021