CrystalXP.net

»

Liste des forums

»

FORUM CrystalXP.net Français

»

Programmation & Création web

»
HTML | CSS | PHP | Apache...
»
[Javascript /Jquery][Résolu] à la recherche d'un script.
 
 




42 utilisateurs inconnus

S'identifier | S'inscrire | Aide
 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

[Javascript /Jquery][Résolu] à la recherche d'un script.

 
n°2863
Fael
look & draw
Profil : Penguin Pro
Avatar
profil
Posté le 11-06-2009 à 19:35:04  
 

Voilà je recherche un script pour faire un effet sur les liens, du style apparition par exemple. J'avais remarqué cet effet sympa sur le site de Chozo, kodlian.net, malheureusement celui-ci utilise prototype. :tongue:  
 
Si ça n'existe pas il faudra que je me plonge dans Flash afin d'obtenir un effet sympa. :smile:


Message édité par Fael le 14-06-2009 à 19:57:28

---------------
http://www.crystalxp.net/forum/mesimages/68128/orange.pnghttp://www.crystalxp.net/forum/mesimages/68128/vert.png1..pnghttp://www.crystalxp.net/forum/mesimages/68128/bleu.png1..png
[Paintings & Airbrushing]-[Webdesigns]
La vitesse de la lumière va plus vite que celle du son,
c'est pour cela que l'on voit les gens brillants avant de les savoir cons.
answer
mood
GoogleAds
profil
Posté le 11-06-2009 à 19:35:04  
 

answer
n°2864
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 11-06-2009 à 21:02:17  
 

Avec JavaScript, tu change graduellement la couleur de police lors du survol et lors de la sortie du curseur.

 

Tu n'as qu'à utiliser:

Message cité 1 fois
Message édité par jcbrinfo le 11-06-2009 à 21:09:34

---------------
JCBR Info
answer
n°2865
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 11-06-2009 à 23:59:24  
 

Un petit exemple de mon cru (pas encore au point):

Code :
  1. //La couleur du lien à la fin pour anim_link_toColor()
  2. var anim_link_r='0';
  3. var anim_link_g='128';
  4. var anim_link_b='255';
  6. //Variables internes
  7. var anim_link_temp=new Array();
  8. var anim_link_cr=0;
  9. var anim_link_cg=0;
  10. var anim_link_cb=0;
  12. //Fonction blanc->couleur
  13. function anim_link_toColor(v_obj,v_time)
  14. {var anim_link_cr=255;
  15. var anim_link_cg=255;
  16. var anim_link_cb=255;
  17. var v_i=anim_link_temp.lenght;
  18. anim_link_temp[v_i]=setInterval('anim_link_toColorI(\''+v_obj.id+'\','+v_i+');',v_time);}
  20. //Fonction couleur->blanc
  21. function anim_link_toWhite(v_obj,v_time)
  22. {var anim_link_cr=anim_link_r;
  23. var anim_link_cg=anim_link_g;
  24. var anim_link_cb=anim_link_b;
  25. var v_i=anim_link_temp.lenght;
  26. anim_link_temp[v_i]=setInterval('anim_link_toWhiteI(\''+v_obj.id+'\','+v_i+');',v_time);}
  28. //Fontions internes
  29. function anim_link_toColorI(v_ID,v_i)
  30. {if(anim_link_cr>anim_link_r)
  31. {anim_link_cr--;}
  32. if(anim_link_cg>anim_link_g)
  33. {anim_link_cg--;}
  34. if(anim_link_cb>anim_link_b)
  35. {anim_link_cb--;}
  36. document.getElementById(v_ID).style.color='rgb(anim_link_cr,anim_link_cg,anim_link_cb)';
  37. if((anim_link_cb<=anim_link_r)&&(anim_link_cb<=anim_link_g)&&(anim_link_cb<=anim_link_b))
  38. {clearInterval(anim_link_temp[v_i]);}}
  40. function anim_link_toWhiteI(v_ID,v_i)
  41. {if(anim_link_cr<255)
  42. {anim_link_cr++;}
  43. if(anim_link_cg<255)
  44. {anim_link_cg++;}
  45. if(anim_link_cb<255)
  46. {anim_link_cb++;}
  47. document.getElementById(v_ID).style.color='rgb(anim_link_cr,anim_link_cg,anim_link_cb)';
  48. if((anim_link_cb>=255)&&(anim_link_cb>=255)&&(anim_link_cb>=255))
  49. {clearInterval(anim_link_temp[v_i]);}}
  51. //Notes:
  52. // -v_obj: ton objet HTML (dans les événements, utilise le mot-clé this)
  53. // -v_time: temps, en millisecondes, entre chaque changment de couleur de 1 unité


Message édité par jcbrinfo le 12-06-2009 à 04:03:16

---------------
JCBR Info
answer
n°2866
Fael
look & draw
Profil : Penguin Pro
Avatar
profil
Posté le 12-06-2009 à 19:34:52  
 

jcbrinfo a écrit :

Avec JavaScript, tu change graduellement la couleur de police lors du survol et lors de la sortie du curseur.
 
Tu n'as qu'à utiliser:

Malheureusement j'y connais rien au javascript. :tongue: Tous les scripts que j'utilise sont tirés de tutoriels ou sont tout prêt avec des démos, où là on doit surtout modifier le css :smile:. Si je devait apprendre un  langage pour le développement web se serait le php avant le javascript. Mais bon faute de temps...c'est aucun des deux.
 
Ton script m'a l'air de faire beaucoup de choses bien différentes. :he: Moi je voudrait simplement passer d'un bleu #00d8ff (R:0 V:210 B:255) à un violet #ff00de (R:255 V:0 B:222). Après il ne faut pas que l'animation soit trop lente ça être un poil désagréable. :tongue:
 
Merci pour ton aide en tout cas. :smile:


Message édité par Fael le 12-06-2009 à 19:35:15

---------------
http://www.crystalxp.net/forum/mesimages/68128/orange.pnghttp://www.crystalxp.net/forum/mesimages/68128/vert.png1..pnghttp://www.crystalxp.net/forum/mesimages/68128/bleu.png1..png
[Paintings & Airbrushing]-[Webdesigns]
La vitesse de la lumière va plus vite que celle du son,
c'est pour cela que l'on voit les gens brillants avant de les savoir cons.
answer
n°2867
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 12-06-2009 à 21:52:33  
 

Mon script est un essai pour faire des transitions couleur de ton choix :ar: blanc et inverse.
 
EDIT: J'ai fini par faire un script fonctionnel (pas encore testé). Il faut par contre que je règle encore quelques petits détails.
 
Le script Javascript:

Code :
  1. //Variable interne
  2. var anim_link_temp=new Array();
  4. //Fonction à appeler
  5. function anim_link(v_obj,v_time,v_fps,v_ir,v_ig,v_ib,v_fr,v_fg,v_fb)
  6. {var v_i=anim_link_temp.lenght;
  7. anim_link_temp[v_i]=new Aray(11);
  8. anim_link_temp[v_i][0]=v_fr;
  9. anim_link_temp[v_i][1]=v_fg;
  10. anim_link_temp[v_i][2]=v_fb;
  11. anim_link_temp[v_i][3]=(v_fr-v_ir)/v_time*v_fps;
  12. anim_link_temp[v_i][4]=(v_fg-v_ig)/v_time*v_fps;
  13. anim_link_temp[v_i][5]=(v_fb-v_ib)/v_time*v_fps;
  14. anim_link_temp[v_i][6]=v_ir;
  15. anim_link_temp[v_i][7]=v_ig;
  16. anim_link_temp[v_i][8]=v_ib;
  17. anim_link_temp[v_i][9]=0;
  18. anim_link_temp[v_i][10]=setInterval('anim_link_toColorI(\''+v_obj.id+'\','+v_i+','+v_time*v_fps+');',Math.floor(v_time*1000/v_fps));}
  20. //Fontion interne
  21. function anim_link_I(v_ID,v_i,v_fnbr)
  22. {anim_link_temp[v_i][6]=Math.floor(anim_link_temp[v_i][6]+anim_link_temp[v_i][3]);
  23. anim_link_temp[v_i][7]=Math.floor(anim_link_temp[v_i][7]+anim_link_temp[v_i][4]);
  24. anim_link_temp[v_i][8]=Math.floor(anim_link_temp[v_i][8]+anim_link_temp[v_i][5]);
  25. document.getElementById(v_ID).style.color='rgb(anim_link_temp[v_i][6],aanim_link_temp[v_i][7],anim_link_temp[v_i][8])';
  26. if(anim_link_temp[v_i][9]==v_fnbr)
  27. {clearInterval(anim_link_temp[v_i][10]);
  28.   document.getElementById(v_ID).style.color='rgb(anim_link_temp[v_i][0],anim_link_temp[v_i][1],anim_link_temp[v_i][2])';}
  29. anim_link_temp[v_i][9]++;}


 
Faire les liens comme suit:

Citation :

<a href="chemin" onmouseover="anim_link(this,temps de l'animation (secondes),images par secondes,Rouge initial,Vert initial,Bleu initial,Rouge final,Vert final,Bleu final);" onmouseout="anim_link(this,temps de l'animation (secondes),images par secondes,Rouge initial,Vert initial,Bleu initial,Rouge final,Vert final,Bleu final);">texte</a>


 
 :ar: onmouseover: Lors du survol de la souris.
 :ar: onmouseover: Lors de la sortie de la souris.
 
Teste-le quand même pour voir si ça te convient et donne-moi-en des nouvelles. :wink:  


Message édité par jcbrinfo le 13-06-2009 à 00:36:18

---------------
JCBR Info
answer
n°2868
Fael
look & draw
Profil : Penguin Pro
Avatar
profil
Posté le 12-06-2009 à 22:39:13  
 

Le script que Chozo a fait lui-même :
 

Code :
  1. /*
  2. *Site.js - @author:Chozo-MJ
  3. */
  4. /*initialsiation des liens (effets sur la couleur du lien)*/
  5. function initLink(){
  6.  $$('a').each(function(e) {
  7.   e.color=e.getStyle('color'); //couleur normal
  8.  e.effect=new Effect.Morph(e,{});
  9.  e.observe('mouseover', function(event) {
  10.   //e.stop();
  11.   if (!e.aColor) e.aColor=e.getStyle('color');
  12.   e.setStyle({'color':e.color});
  13.   //e.morph('color:'+e.aColor);
  14.   e.effect= new Effect.Morph(e,{
  15.     style:{'color':e.aColor},
  16.     beforeStart: function(r) {
  17.      e.effect.cancel();
  18.     },
  19.     duration:0.5,
  20.    });
  21.   });
  22.  e.observe('mouseout', function(event) {
  23.   e.effect= new Effect.Morph(e,{
  24.     style:{'color':e.color},
  25.     beforeStart: function(r) {
  26.      e.effect.cancel();
  27.     },
  28.     afterFinish: function(effect) {
  29.     },
  30.     duration:0.5,
  31.    });
  32.   },false);
  33. });
  34. }


 
Je vais essayer de contacter Chozo qui nous explique ça. :biggrin:  


---------------
http://www.crystalxp.net/forum/mesimages/68128/orange.pnghttp://www.crystalxp.net/forum/mesimages/68128/vert.png1..pnghttp://www.crystalxp.net/forum/mesimages/68128/bleu.png1..png
[Paintings & Airbrushing]-[Webdesigns]
La vitesse de la lumière va plus vite que celle du son,
c'est pour cela que l'on voit les gens brillants avant de les savoir cons.
answer
n°2869
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 13-06-2009 à 01:05:56  
 

Jette un coup d'oeil à mon précédant message, j'ai fait une solution prêt-à-l'emploi. (Il me reste un petit détail à régler, mais cela concerne une limite qui ne devrait pas influencer les tests. :wink: )


Message édité par jcbrinfo le 13-06-2009 à 01:06:37

---------------
JCBR Info
answer
n°2870
Fael
look & draw
Profil : Penguin Pro
Avatar
profil
Posté le 13-06-2009 à 18:14:16  
 

J'ai essayer ton code mais ça marche pas des masses. :tongue:  
 
J'ai trouvé un tutoriel qui à l'air pas mal : [link]
 
[EDIT] : ça marche plutôt bien et c'est propre :smile: : [link]


Message édité par Fael le 13-06-2009 à 18:37:06

---------------
http://www.crystalxp.net/forum/mesimages/68128/orange.pnghttp://www.crystalxp.net/forum/mesimages/68128/vert.png1..pnghttp://www.crystalxp.net/forum/mesimages/68128/bleu.png1..png
[Paintings & Airbrushing]-[Webdesigns]
La vitesse de la lumière va plus vite que celle du son,
c'est pour cela que l'on voit les gens brillants avant de les savoir cons.
answer
n°2871
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 13-06-2009 à 23:49:32  
 

Même si tu as trouvé ce que tu cherche, je tiens à mettre ici la version débugué de mon script.
Exemple:

Code :
  1. <html>
  2. <head>
  3. <script type="text/javascript" language="javascript">
  4. //Variable interne
  5. var anim_link_temp=new Array();
  7. //Fonction à appeler
  8. function anim_link(v_obj,v_time,v_fps,v_ir,v_ig,v_ib,v_fr,v_fg,v_fb)
  9. {var v_i=0;
  10. var v_ok=0;
  11. for(v_i=0;v_i<anim_link_temp.lenght;v_i++)
  12. {if(!(anim_link_temp[v_i][11]))
  13.   {v_ok=true;
  14.    break;}}
  15. if(!(v_ok))
  16. {v_i=anim_link_temp.length;}
  17. anim_link_temp[v_i]=new Array(12);
  18. anim_link_temp[v_i][0]=v_fr;
  19. anim_link_temp[v_i][1]=v_fg;
  20. anim_link_temp[v_i][2]=v_fb;
  21. anim_link_temp[v_i][3]=(v_fr-v_ir)/v_time/v_fps;
  22. anim_link_temp[v_i][4]=(v_fg-v_ig)/v_time/v_fps;
  23. anim_link_temp[v_i][5]=(v_fb-v_ib)/v_time/v_fps;
  24. anim_link_temp[v_i][6]=v_ir;
  25. anim_link_temp[v_i][7]=v_ig;
  26. anim_link_temp[v_i][8]=v_ib;
  27. anim_link_temp[v_i][9]=0;
  28. anim_link_temp[v_i][10]=setInterval('anim_link_I(\''+v_obj.id+'\','+v_i+','+v_time*v_fps+');',Math.floor(v_time*1000/v_fps));
  29. anim_link_temp[v_i][11]=true;
  30. //document.getElementById('test').innerHTML+='<br>';
  31. }
  33. //Fontion interne
  34. function anim_link_I(v_ID,v_i,v_fnbr)
  35. {anim_link_temp[v_i][6]=Math.floor(anim_link_temp[v_i][6]+anim_link_temp[v_i][3]);
  36. anim_link_temp[v_i][7]=Math.floor(anim_link_temp[v_i][7]+anim_link_temp[v_i][4]);
  37. anim_link_temp[v_i][8]=Math.floor(anim_link_temp[v_i][8]+anim_link_temp[v_i][5]);
  38. document.getElementById(v_ID).style.color='rgb('+anim_link_temp[v_i][6]+','+anim_link_temp[v_i][7]+','+anim_link_temp[v_i][8]+')';
  39. //document.getElementById('test').innerHTML+='rgb('+anim_link_temp[v_i][6]+','+anim_link_temp[v_i][7]+','+anim_link_temp[v_i][8]+');';
  40. if(anim_link_temp[v_i][9]==v_fnbr)
  41. {clearInterval(anim_link_temp[v_i][10]);
  42.   anim_link_temp[v_i][11]=false;
  43.   document.getElementById(v_ID).style.color='rgb('+anim_link_temp[v_i][0]+','+anim_link_temp[v_i][1]+','+anim_link_temp[v_i][2]+')';}
  44. anim_link_temp[v_i][9]++;}
  45. </script>
  46. </head>
  47. <body>
  48. <a id="monlien1" href="http://www.google.ca/" onmouseover="anim_link(this,1,10,0,210,255,255,0,222);" onmouseout="anim_link(this,1,10,255,0,222,0,210,255);">texte</a>
  49. </body>
  50. </html>


Les parties en gras sont propre à chaque lien.

 

Note: C'était normal que ça ne fonctionnait pas, j'avais fait plein d'ereurs. Maintenant, elles sont corrigés.


Message édité par jcbrinfo le 13-06-2009 à 23:50:52

---------------
JCBR Info
answer

Aller à :
Ajouter une réponse
  

CrystalXP.net

»

Liste des forums

»

FORUM CrystalXP.net Français

»

Programmation & Création web

»
HTML | CSS | PHP | Apache...
»
[Javascript /Jquery][Résolu] à la recherche d'un script.
 

Forum MesDiscussions.Net, Version 2007.2
(c) 2000-2007 Doctissimo Software
Page générée en 0.134 secondes