Fade-effecten met figuren I: Swap Fade

Hieronder zie je drie links en een plaatje. Als je op één van die links klikt vervaagt het plaatje totdat het verdwenen is. Daarna komt er een ander plaatje voor in de plaats. Afhankelijk van de link die je kiest gaat het effect sneller of langzamer.
 

Plaatje wisselen: Snel
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 swapfade.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 Swap-fade effect, bevat de pagina van Brothercake ook nog twee andere, vergelijkbare effecten: Cross Fade en Cross Wipe. Die worden ook op deze website besproken.

• Het script gebruikt de eigenschap opacity (doorzichtigheid) voor het wisselen van de plaatjes. Als dat niet beschikbaar is (bij zeer oude browsers) wordt het plaatje gewisseld zonder het overvloei-effect.

Het inbouwen in je eigen site gaat als volgt:

• Pak de downloadfile uit.
• Maak referenties naar transitions.css en swapfade.js zoals aan het einde van deze pagina is aangegeven.
• De file transitions.css hoef je niet te veranderen.
• In swapfade.js moet je de figuren aangeven die je wilt gaan gebruiken in het fade-effect. Dit is nodig om ervoor de zorgen dat de plaatjes op tijd door de browser worden binnengehaald, zodat het effect niet verstoord wordt. De plaatjes staan in de array imgs die onderdeel is van het object isf.
• In het voorbeeld op deze pagina is:
    isf.imgs = [
      'buttons/udm4-whitebutton88x31.gif',
      'buttons/udm4-greenbutton88x31.gif',
     n'buttons/udm4-purplebutton88x31.gif'
    ];
  vervangen door: 
    isf.imgs = [
      'plaatje_5.jpg',
      'plaatje_6.jpg',
      'plaatje_7.jpg'
    ];
   
• Opmerking:
  De plaatjes die je gebruikt mogen van verschillende type zijn (.GIF, .JPG, .PNG, enz.), maar ze moeten wel allemaal even groot zijn.
   
• Op de plaats waar het effect moet komen zet je een plaatje neer. Dat plaatje moet een id hebben, waarvan je de naam zelf kunt kiezen. Het id van het effect op deze bladzijde is 'SwapFadeDemo'.
• Om het effect te laten werken, roep je de JavaScript funtion swapfade() aan. In het voorbeeld op deze bladzijde worden daarvoor links gebruikt. Dat is de handigste methode als je het handmatig wilt laten starten. Het kan natuurlijk ook met onMouseOver en onMouseOut, of zelfs zonder tussenkomst van de gebruiker.
• De function swapfade() heeft 4 parameters, waarvan er drie verplicht zijn:
   
  

  Naam	Betekenis
  Image_Object	Referentie aan het image-object (plaatje) dat moet 'verdwijnen'. Hier: document.getElementById('SwapFadeDemo')
  New_Image_ref	Bestandsnaam van het plaatje dat moet 'verschijnen'.
  Time_seconds	Tijd in seconden voor het hele effect (fade-in + fade-out). Dit moet een geheel getal zijn.
  Alt_text	Nieuwe alt-tekst voor het plaatje. Hiermee wordt de 'vorige' alt-tekst overschreven. Deze parameter mag worden weggelaten. Merk op dat weglaten hier iets anders is dan het ingeven van een lege string. Als je een lege string geeft verdwijnt de alt-tekst, anders blijft de 'vorige' alt-tekst staan.

   
  Alle parameters in de aanroep van swapfade(), behalve de eerste, moeten tussen quotes worden gezet.
   
• Natuurlijk heeft ook deze techniek zijn beperkingen. Als je het effect korter laat duren dan twee seconden, zie je dat na de fade-out het plaatje wordt gewisseld, alvorens aan de fade-in te beginnen. In het voorbeeld op deze bladzijde is dat het geval bij "Snel". Als je het effect 2 seconden of langer laat duren heb je dat niet.
• Je kunt dit script in hetzelfde document tegelijk gebruiken met de scripts Cross Fade en/of Cross Wipe, met dezelfde plaatjes.
  Als je dat doet hoef je maar éénmaal een pre-load van de plaatjes te doen. Noem de plaatjes in alle scripts en verwijder het stukje code dat de pre-load doet uit alle scripts, behalve het eerste.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
• Omdat de CSS heel klein is, is het te overwegen om die in de style-sheet van je eigen bladzijde op te nemen.

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

<!-- Image transitions by Brothercake - https://www.brothercake.com/ -->
<script src="swapfade.js"></script>
<link rel="stylesheet" href="transitions.css" media="screen, projection">

<img id="SwapFadeDemo" src="plaatje_0.jpg" alt="Berglandschap bij ondergaande zon" width="134" height="100" border="0">
 
<a href="javascript:swapfade(document.getElementById('SwapFadeDemo'), 'plaatje_5.jpg', '1', 'Zonsondergang in een Berglandschap met een Meer')">Plaatje wisselen: Snel</a>
<a href="javascript:swapfade(document.getElementById('SwapFadeDemo'), 'plaatje_6.jpg', '2', 'Zonsondergang in de Polder')">Plaatje wisselen: Middel</a>
<a href="javascript:swapfade(document.getElementById('SwapFadeDemo'), 'plaatje_7.jpg', '5', 'Zonsondergang aan Zee')">Plaatje wisselen: Langzaam</a>

Downloaden:
 
Druk op de knop:  File: voorb257.zip, 2327 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.