Un traitement en javascript qui permet de créer de belles transitions entre plusieurs images, comme on peut souvent le voir dans des animations flash.

Procédé

Le script à mettre en place :

        var imgs=new Array();
        imgs[0]="./image1.jpg";
        imgs[1]="./image2.jpg";
        
        var cpt=0;
        function showimages ()
        {
                document.getElementById("ima").src=imgs[cpt];
                new Effect.Opacity('ima', {duration:4, from:0, to:1, afterFinish:function(){changeimages()}});
        }
        
        function changeimages()
        {
                new Effect.Opacity('ima', {duration:1,queue: 'end', from:1, to: 0, afterFinish:function(){changeimages2()}});
        }
        
        function changeimages2()
        {
                cpt++;
         	if(cpt>=imgs.length) cpt=0;
        	        showimages();
        }

Et maintenant, il suffit de le lancer :

setTimeout('changeimages()',1500)

Et voilà ! Appréciez le résultat ! Vous pouvez voir un exemple sur le site (page d’accueil) de mon cousin à cette adresse :

http://www.frederichorier.fr/