Fade effecten met figuren III: Cross Wipe

Hieronder zie je een aantal links en een plaatje. Als je op één van die links klikt verandert het plaatje. Afhankelijk van de link die je kiest gaat het met een ander effect.

Bij de links staat ook een code. Die wordt gebruikt door het JavaScript om onderscheid te maken tussen de verschillende overvloei-technieken.

• 'lr'   : van Links naar Rechts
• 'rl'   : van Rechts naar Links
• 'tb'   : van Boven naar Beneden
• 'bt'   : van Beneden naar Boven
• 'tlbr' : van Linksboven naar Rechtsonder
• 'trbl' : van Rechtsboven naar Linksonder
• 'bltr' : van Linksonder naar Rechtsboven
• 'brtl' : van Rechtsonder naar Linksboven
• 'cve'  : vanuit het Midden naar de Verticale Randen
• 'che'  : vanuit het Midden naar de Horizontale Randen
• 'cc'   : vanuit het Midden naar de Hoeken

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 55 van de file crosswipe.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 55 deze code in te voegen: isf.obj.title = arguments[4];
De alt-tekst en de title-tekst zijn dan steeds gelijk aan elkaar.

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

• Het script gebruikt de eigenschap clip (gedeelte van het document op het scherm) voor het wisselen van de plaatjes. Als dat niet beschikbaar is (bij oudere browsers) wordt het plaatje gewisseld zonder het overvloei-effect.
• Bij elk plaatje wordt de alt-tekst veranderd.

Het inbouwen in je eigen site gaat als volgt:

• Pak de downloadfile uit.
• Maak referenties naar transitions.css en crosswipe.js zoals aan het einde van deze pagina is aangegeven.
• De file transitions.css hoef je niet te veranderen.
• In crosswipe.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 ixw.
• In het voorbeeld op deze pagina is:
      'buttons/udm4-greenbutton88x31.gif',
      'buttons/udm4-whitebutton88x31.gif',
      .
      .
      'buttons/udm4-blackbutton88x31.gif',
  vervangen door: 
      ixw.imgs[0] = 'stapeltje_0.jpg',
      ixw.imgs[1] = 'stapeltje_1.jpg',
      .
      .
      ixw.imgs[10] = 'stapeltje_10.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 'CrossWipeDemo'.
• Om het effect te laten werken, roep je de JavaScript function crosswipe() 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 crosswipe() heeft geen parameters. Bij de aanroep van crosswipe() kun je er vijf gebruiken, waarvan er vier verplicht zijn:
   
  

  Naam	Betekenis
  Image_Object	Referentie aan het image-object (plaatje) dat moet 'verdwijnen'. hier: document.getElementById('CrossWipeDemo')
  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.
  Effect	Het overvloei-effect. Dit geef je op met een keyword. De elf mogelijke keywords met hun betekenis staan bovenaan de bladzijde, bij de links. Als je geen of een niet-bestaand keyword opgeeft wordt het effect "van Rechts naar Links" gebruikt.
  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 crosswipe(), behalve de eerste, moeten tussen quotes worden gezet.
   
• Je kunt dit script in hetzelfde document tegelijk gebruiken met de scripts Swap Fade en/of Cross Fade, 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.
   
• Opmerking:
  Dit script werkt niet als het plaatje in een <table> staat. Het overvloei-effect verdwijnt dan.

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="crosswipe.js"></script>
<link rel="stylesheet" href="transitions.css" media="screen, projection">

<img id="CrossWipeDemo" src="stapeltje_0.jpg" alt="Gemaal en Molen in Spijkenisse" width="250" height="187" border="0">

crosswipe(document.getElementById('CrossWipeDemo'),'stapeltje_03.jpg', '2','tlbr','Paddenstoel')

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