[CSS] cet effet possible en css ???

cet effet possible en css ??? [CSS] - HTML/CSS - Programmation

Marsh Posté le 05-02-2004 à 13:48:56    

Voila sur les site de roxorgamers (ex: http://teammpm.roxorgamers.com/)
 
le lien change de couleur avec la le passage de la souris. Le faire changer de couleur po de probleme je sais faire. Mais comment faire pr ke la couleur change progressivement comme sur le site?
 
merci

Reply

Marsh Posté le 05-02-2004 à 13:48:56   

Reply

Marsh Posté le 05-02-2004 à 13:52:12    

avec du javascript specifique a IE qui ne marche pas sous mozilla/firebird ?


---------------
L'inventeur de la cédille est un certain monsieur Groçon .
Reply

Marsh Posté le 05-02-2004 à 13:54:43    

c ce que j'allais dire...y doit surement y avoir une boucle qui fait changer de couleur au lien très vite en lui faisant prendre plusieurs couleurs : le rendu doit donner ca, avec un bon timming


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 05-02-2004 à 13:57:23    

dc po possible en css ?

Reply

Marsh Posté le 05-02-2004 à 13:59:52    

je pense pas...avec un mouseover tu peux lancer un effet, mais ce serait un changement immédiat de couleur : je vois pas de moiyen de le faire progressivement


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 05-02-2004 à 14:04:54    

oki
tampis

Reply

Marsh Posté le 05-02-2004 à 14:06:27    

bon jvien de voir ds la source; c'est bien du JS
 
merde jaime po js

Reply

Marsh Posté le 05-02-2004 à 14:14:38    

euh... ce sont quelles liens qui changent de couleur? Parce que sous firebird, ils sont simplement noir.

Reply

Marsh Posté le 05-02-2004 à 14:31:58    

Code :
  1. /*************
  2. **** <config>
  3. **/
  5. startColor = "#000000"; // initial link color
  6. endColor = "#FFFFFF";  // final link color
  8. stepIn = 20; // delay when fading in
  9. stepOut = 20; // delay when fading out
  11. /*
  12. ** set to true or false; true will
  13. ** cause all links to fade automatically
  14. ***/
  15. autoFade = true;
  17. /*
  18. ** set to true or false; true will cause all CSS
  19. ** classes with "fade" in them to fade onmouseover
  20. ***/
  21. sloppyClass = false;
  23. /**
  24. **** </config>
  25. **************/
  27. /*************
  28. **** <install>
  29. **
  31. Now, once you have customized your fading colors,
  32. you need to include your customized .js file on
  33. every page that you want to use it in. You can
  34. include javascript files using this syntax (in
  35. the head of a document):
  37. <script src="fade.js" language="Javascript"></script>
  39. Now that you have the file included, you need to
  40. setup your links a small bit.  Each link that you
  41. want to fade needs to use the fade class.
  43. Example:
  45. <a href="blah.html" class="fade">click here</a>
  47. Also, the link must be plain text.  This means
  48. that you can't have <b>'s, <i>'s, <font>'s, etc.
  49. inside of the link.
  51. Example of what not to do:
  53. <a href="blah.html" class="fade"><b>click</b> here</a>
  55. **
  56. **** </install>
  57. **************/
  59. hexa = new makearray(16);
  60. for(var i = 0; i < 10; i++)
  61.     hexa[i] = i;
  62. hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
  63. hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
  65. document.onmouseover = domouseover;
  66. document.onmouseout = domouseout;
  68. startColor = dehexize(startColor.toLowerCase());
  69. endColor = dehexize(endColor.toLowerCase());
  71. var fadeId = new Array();
  73. function dehexize(Color){
  74.         var colorArr = new makearray(3);
  75.         for (i=1; i<7; i++){
  76.                 for (j=0; j<16; j++){
  77.                         if (Color.charAt(i) == hexa[j]){
  78.                                 if (i%2 !=0)
  79.                                         colorArr[Math.floor((i-1)/2)]=eval(j)*16;
  80.                                 else
  81.                                         colorArr[Math.floor((i-1)/2)]+=eval(j);
  82.                         }
  83.                 }
  84.         }
  85.         return colorArr;
  86. }
  88. function domouseover() {
  89.   if(document.all){
  90.           var srcElement = event.srcElement;
  91.           if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade" ) != -1))
  92.         fade(startColor,endColor,srcElement.uniqueID,stepIn);
  93.    }
  94. }
  96. function domouseout() {
  97.   if (document.all){
  98.           var srcElement = event.srcElement;
  99.     if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade" ) != -1))
  100.         fade(endColor,startColor,srcElement.uniqueID,stepOut);
  101.     }
  102. }
  104. function makearray(n) {
  105.     this.length = n;
  106.     for(var i = 1; i <= n; i++)
  107.         this[i] = 0;
  108.     return this;
  109. }
  111. function hex(i) {
  112.     if (i < 0)
  113.         return "00";
  114.     else if (i > 255)
  115.         return "ff";
  116.     else
  117.        return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
  119. function setColor(r, g, b, element) {
  120.       var hr = hex(r); var hg = hex(g); var hb = hex(b);
  121.       element.style.color = "#"+hr+hg+hb;
  122. }
  124. function fade(s,e, element,step){
  125.         var sr = s[0]; var sg = s[1]; var sb = s[2];
  126.         var er = e[0]; var eg = e[1]; var eb = e[2];
  128.         if (fadeId[0] != null && fade[0] != element){
  129.                 setColor(sr,sg,sb,eval(fadeId[0]));
  130.                 var i = 1;
  131.                 while(i < fadeId.length){
  132.                         clearTimeout(fadeId[i]);
  133.                         i++;
  134.                         }
  135.                 }
  137.     for(var i = 0; i <= step; i++) {
  138.             fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
  139.                         step+ " )),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
  140.                         " )),Math.floor(" +sb+ " * ((" +step+ "-" +i+ " )/" +step+ " ) + " +eb+ " * (" +i+ "/" +step+ " )),"+element+" );",i*step);
  141.                 }
  142.         fadeId[0] = element;
  143. }
  145. function imgfade(e,mode)
  146. {
  147.      if( mode == 0 )
  148.      {
  149.           e.filters.alpha.opacity = 80
  150.      }
  151.      else
  152.      {
  153.           e.filters.alpha.opacity = 15
  154.      }
  155. }


 
fade.js, le script utilisé.
Etant donné qu'il fait appel aux filtres, il ne fonctionne qu'avec IE.


Message édité par KrisCool le 05-02-2004 à 14:32:30

---------------
Loose Change Lies | Bars | Last.fm
Reply

Marsh Posté le 05-02-2004 à 14:38:16    

C'est du 100% M$ mais sans script (enfin, très peu)
 
http://msdn.microsoft.com/workshop [...] ilt_08.htm
 
Presque aucun script, c'est le filtre DX qui s'occupe de la temporisation...
http://msdn.microsoft.com/workshop [...] uttons.htm
 
Mais là bah c'est du IE sur Win32 only :D

Reply

Marsh Posté le 05-02-2004 à 14:38:16   

Reply

Marsh Posté le 05-02-2004 à 14:40:20    

MagicBuzz a écrit :

C'est du 100% M$ mais sans script (enfin, très peu)
 
http://msdn.microsoft.com/workshop [...] ilt_08.htm
 
Presque aucun script, c'est le filtre DX qui s'occupe de la temporisation...
http://msdn.microsoft.com/workshop [...] uttons.htm
 
Mais là bah c'est du IE sur Win32 only :D


 
C'est vraiment pas sorcier de faire un fade compatible IE, Moz et Opera pourtant. Il y en a vraiment (je ne parle pas de toi) qui aiment se compliquer la vie bêtement. Jouer sur une couleur CSS avec du JS, c'est enfantin.

Reply

Marsh Posté le 05-02-2004 à 14:43:17    

Vi mais dans mon second exemple, ça fait plus que ça ;)
 
Le truc avec des bordures ombragées, etc. c'est pas des images, juste des divs.
 
Les filtres "DX" de IE sont vraiment très bien. Seul problème, c'est qu'ils n'ont pas leur équivalents chez les autres, du coup, inutilisable :/

Reply

Marsh Posté le 05-02-2004 à 14:44:58    

MagicBuzz a écrit :

C'est du 100% M$ mais sans script (enfin, très peu)
 
http://msdn.microsoft.com/workshop [...] ilt_08.htm
 
Presque aucun script, c'est le filtre DX qui s'occupe de la temporisation...
http://msdn.microsoft.com/workshop [...] uttons.htm
 
Mais là bah c'est du IE sur Win32 only :D


 
A quand les sites Webs "Optimised for Radeon 9700 with DirectX 9" avec les liens qui changent de couleur en 3D temps réel avec support des pixel shader ?

Reply

Marsh Posté le 05-02-2004 à 15:29:28    

Tu rigoles, mais mine de rien, regarde cette page tout bête (avec IE 5.5 ou plus évidement) :
 
http://msdn.microsoft.com/library/ [...] banner.asp
 
Bah y'a pas une ligne de script, juste des balises HTML.

Reply

Marsh Posté le 05-02-2004 à 15:33:18    

MagicBuzz a écrit :

Tu rigoles, mais mine de rien, regarde cette page tout bête (avec IE 5.5 ou plus évidement) :
 
http://msdn.microsoft.com/library/ [...] banner.asp
 
Bah y'a pas une ligne de script, juste des balises HTML.


 
Oui, quelle page ?  :D

Reply

Marsh Posté le 05-02-2004 à 15:36:46    

de quoi ?

Reply

Marsh Posté le 05-02-2004 à 16:19:48    

MagicBuzz a écrit :

Tu rigoles, mais mine de rien, regarde cette page tout bête (avec IE 5.5 ou plus évidement) :
 
http://msdn.microsoft.com/library/ [...] banner.asp
 
Bah y'a pas une ligne de script, juste des balises HTML.


 
Quelle horreur ! :ouch:  :ouch:

Reply

Marsh Posté le 06-02-2004 à 17:34:32    

ben alors ont fait comment... il est ou le script java ( voir le fade du 1er link en haut du topik )
 
tx


---------------
Il me reste un pays à connaître. Il me reste un pays à donner. Et le jour où ce pays naîtra, nul doute, je me souviendrai ---Gilles Vigneault---
Reply

Marsh Posté le 06-02-2004 à 19:04:07    

non mais c possible avec un mouse over et background url qui change vers un gif annimé qui fait el fade...

Reply

Marsh Posté le 06-02-2004 à 22:01:20    

donc c plus du texte...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 06-02-2004 à 22:18:58    

Kristoph a écrit :


 
A quand les sites Webs "Optimised for Radeon 9700 with DirectX 9" avec les liens qui changent de couleur en 3D temps réel avec support des pixel shader ?


 
Dis le pour rire... [:meganne]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed