Passons maintenant à la partie technique :
Pour la mise en place, la procédure est exactement la même que pour le diaporama en "slide" (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :

monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);

... en y ajoutant un nouveau paramètre :

monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2, 2000, 500, 600, "flou");

La ligne "new Diaporama" s'utilise alors ainsi :

100 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
2 : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
2000 : temps de pause, en millisecondes, entre chaque transition.
500 : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
600 : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.

Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.
La durée théorique d'une transition peut être calculée ainsi :

paramètre_1 x 100 / paramètre_2 = durée en millisecondes.
exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.

Voila, je pense que ça devrait suffire comme explication en plus des explications du diaporama en "slide", mais n'hésitez pas à demander des précisions.
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.

11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.

Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du coloriage de mon site.
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.

Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel Face Transformer découvert dans l'article de Ludo. Un autre exemple de mise en application de ce rollover progressif est visible sur cet article de MP qui n'a pas résisté à la tentation.

Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du diaporama et en voici le mode d'emploi :

insérez le code suivant à l'emplacement souhaité :

#60;script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1, 1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://mon.serveur.fr/.../photo_01.jpg",
		"http://mon.serveur.fr/.../photo_02.jpg");
</script>

apportez les modification suivantes :
- ligne "new RolloverFlou" :
  - 25 : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
  - 1 : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
  - 1000 : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
  - 163 : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
  - 200 : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
- ligne "ajouteCadre" : une ligne facultative qui permet d'ajouter une bordure au rollover.
  - 3 : épaisseur de la bordure en pixels.
  - #000000 : code couleur pour la bordure.
- ligne "place" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)

Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.

Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.

Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).