City Hunter
Utilisateur : anonyme   Samedi 20 Avril 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)

 
Excellente idée de mise en application! mdr comme on dit
Commentaire de MP (site web) le jeudi 15 décembre 2005 - 01:27

 
Extra !! Dès que j'utilise ce rollover, je te tiens au courant !! Quelle chance que tu te sois penché sur le sort des obésiens !! Merci Forrest !!
Commentaire de legnoch (site web) le jeudi 15 décembre 2005 - 06:22

 
Dieu Forrest a encore frappé! Je risque bien d'utiliser ça désormais pour mes portraits de gamins. Le prochain n'est pas prévu avant un moment remarque... Il va falloir que je glisse ce script ailleurs!
Commentaire de Ludo (site web) le jeudi 15 décembre 2005 - 11:04

 
Merçi Forrest du commentaire laissé sur mon blog. Maintenant je vais mettre en application ton article. Bonne journée.
Commentaire de Christian (site web) le vendredi 16 décembre 2005 - 06:18

 
C'est génial ça !
Il faudra que je me penche dessus, dès que mon emploi du temps me laissera un peu souffler...
Merci pour ton conseil de "title" ! je l'ai fait, j'attends de voir si on me dit que ça marche !
Bonne journée
Commentaire de Briesing (site web) le vendredi 16 décembre 2005 - 12:13

 
avant de me jeter sur cet outil qui je trouve semble fort sympathique...es-t-il indispensable d'être en privilège? Merci
Commentaire de Pascal (site web) le vendredi 16 décembre 2005 - 15:48

 
Suite au commentaire de Legnoch, et pour que d'autres personnes ne le comprennent pas autrement, je tiens à préciser que ce script fonctionne sur toute plateforme acceptant le javascript, et pas uniquement sur over-blog.

Et pour répondre à la question de Pascal : le mode "confiance" d'over blog est assez restrictif et ne permet d'intégrer aucun javascript comme cet outil :(

Ca m'embête quand même que certaines personnes ne puissent pas l'utiliser, tout comme le diaporama :'(
Commentaire de Forrest (site web) le vendredi 16 décembre 2005 - 16:27

 
Autant pour moi forrest.. c'est un javascript et bien sûr il fonctionne sur toutes les pages du web acceptant le javascript !!
Pour les modes confiance d'over-blog c'est regrettable en effet. Vous avez deux solutions : Soit vous faites un br de plus de 80 pendant une période donnée pour passer en privilège (je ne sais pas combien de temps mais je crois que c'est automatisé maintenant ! Ils le disent peut-être dans le forum.)
Soit vous prenez le pack prémium dont c'est à peu près le seul avantage, si vous n'avez pas la patience d'attendre (ni l'espoir) de passer en privilège !!
@+
@+
Commentaire de legnoch (site web) le samedi 17 décembre 2005 - 05:50

 
Merci Legnoch d'avoir pu apporter ces quelques précisions.
Commentaire de Forrest (site web) le lundi 19 décembre 2005 - 21:54

 
Joyeux Noel!!!!!
Commentaire de MP (site web) le samedi 24 décembre 2005 - 06:36

 
Joyeux Noël Forrest !
et tous mes voeux pour la nouvelle année !
Commentaire de Briesing (site web) le samedi 24 décembre 2005 - 15:43

 
Merci Merci :)
Joyeux Noël à tout le monde !

Au passage, pour ceux qui seraient passés par ici entre 16H et 18H, il y a eu quelques problèmes d'affichage du site.
Il s'agit en fait d'un abonné wanadoo situé à Poitiers qui a trouvé drôle d'exploiter le fait que je n'empèche pas l'utilisation de scripts dans les commentaires afin de rediriger vers son site sans intérêt visible et qui, par un deuxième commentaire a créé une erreur javascript empêchant l'affichage du contenu du site.

Pour lui répondre je dirais simplement que son script n'a aucun intérêt : un "alert" suivit d'une redirection fait partie de choses basiques. Ce script a pu fonctionné car je pensais que je me trouvait dans un monde civilisé.
L'utilisation de ce script a autant d'intérêt que de cracher dans une voiture qui a la fenêtre ouverte : effectivement on peut le faire, de là à en éprouver une grande fierté au point de demander au propriétaire de la voiture d'admirer le crachat...
Commentaire de Forrest (site web) le samedi 24 décembre 2005 - 18:18

 
Joyeux noël Forrest !
Commentaire de legnoch (site web) le dimanche 25 décembre 2005 - 14:24

 
Hello Forrest !
Quels yeux ;) Ca fait peur de vieillir ;o)))))
Nous te souhaitons une bonne et heureuse année 2006 avec la réalisation de tes désirs !
Bonne continuation ;)
Commentaire de kikojo (site web) le dimanche 01 janvier 2006 - 18:40

 
bonne année Forrest !!
Commentaire de legnoch (site web) le lundi 02 janvier 2006 - 01:47

 
Meilleurs voeux pour cette nouvelle année !
Commentaire de Briesing (site web) le lundi 02 janvier 2006 - 14:26

 
Cela fait longtemps...alors bonne année !
Commentaire de pascal (site web) le dimanche 08 janvier 2006 - 21:52

 
Bonsoir Forrest ! je suis bien intéressée par ton roll-over progressif. Mais je crois que je n'ai pas bien compris comment je dois faire... Si je t'envoie le code source d'un de mes roll-over normal, tu pourrais me le transformer en progressif pour que je comprenne comment m'y prendre ? Si tu as un moment, bien entendu !
Sinon, ne te prends pas la tête, ce n'est pas grave !
Bonne soirée
Commentaire de Briesing (site web) le mardi 17 janvier 2006 - 22:46

 
Je ne sais plus si je te l'avais dit ou pas mais bananier aussi!
Bon c'est quand que tu nous fait une p'tite mise à jour?
Commentaire de Ludo (site web) le vendredi 20 janvier 2006 - 12:40

 
Oui, nous nous sommes souhaité une bonne année à l'occasion de ton article "scoop 2" du 13 janvier.

J'en profite donc pour souhaiter une bonne année, une bonne santé et plein de visiteurs pour chacuns de vos blogs.

Concernant les mise à jour, après avoir essayé de m'imposer un minimum d'un article par semaine, j'ai décidé de ne mettre à jour qu'occasionnellement : l'écriture, en elle-même, est un loisir qui n'est pas le miens alors il faut au moins que le contenu me plaise sans me creuser la cervelle.
Commentaire de Forrest (site web) le vendredi 20 janvier 2006 - 19:15

 
c'est dommage que tu n'ais plus le temps de tenir ton blog a jour. j'ai appris pas mal de truc interessant.
Commentaire de KM (site web) le mardi 24 janvier 2006 - 23:55

 
Salut David, super ton site !!
Commentaire de Charles Renault (site web) le vendredi 09 septembre 2016 - 11:05

Ajouter un commentaire




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