City Hunter
Utilisateur : anonyme   Jeudi 21 Novembre 2024 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Roll-Over progressif en javascript mercredi 14 décembre 2005 - 21:28
Roll-Over progressif en javascript


 
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é :
    <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).
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (22)





Nombre de surfeurs égarés en ce moment : 8
SOFUN - Le Site Où il Fallait Un Nom