Aller au contenu


Photo
- - - - -

dégardé de couleurs


  • Veuillez vous connecter pour répondre
5 réponses à ce sujet

#1 kikou

kikou

    Member

  • Membres
  • 44 messages

Posté 02 mars 2002 - 10:42

Salut tout le monde !
Je voudrais savoir un truc, alors pour ceux qui sont sympa et qui ont un peu de temps :

http://www.ffjr.org/cs.php

Comment fais-ton fait creer ce petit dégradé de couleur qui va du orange vers le blanc quand on passe la souris sur "commentaires" juste en dessous des news ?
  • 0

PUBLICITÉ

    Annonces Google

#2 Ricko

Ricko

    Junior Member

  • Membres
  • 4 messages

Posté 02 mars 2002 - 11:41

Salut, tu as toute l'explication la dedans !!

Bon code !

/*****************************************
|| Fade Script Version 3.1 ||
|| http://anarchos.xs.mw/fade.phtml ||
|| © July 2001 ||
|| _____________________________________ ||
|| Created by: ||
|| Anarchos > anarchos.xs.mw ||
|| _____________________________________ ||
|| auto-startColor by Mike West ||
|| mike@westman.org ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix ||
|| http://www.princefari.com ||
|| _____________________________________ ||
|| Color conversion from decimal to ||
|| hex (dehexize function) by: ||
|| Litejet > litejet@hotmail.com ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by: ||
|| Dak Phoenix > phoenix-archetypes.com ||
|| _____________________________________ ||
|| domouseover/out based on scripts by ||
|| The Shadow > www.icon.co.za/~andrewk ||
|| ||
*****************************************/

/*************
**** <config>
**/

fadeColor = "#FFFFFF"; // color to fade to
//fadeColor = "#000000";
stepIn = 20; // delay when fading in
stepOut = 35; // delay when fading out

/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = true;

/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;

/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;

/**
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit. Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text. This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click</b> here</a>

Have fun!
-Anarchos-

**
**** </install>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

fadeColor = dehexize(fadeColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
if (!srcElement.startColor) {
srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
}
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
}
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
}
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setColor(r, g, b, element) {
var hr = hex®; var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e,element,step) {
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element && eval(fadeId[0])) {
var orig = eval(fadeId[0]);
setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
var i = 1;
while(i < fadeId.length) {
clearTimeout(fadeId[i]);
i++;
}
}

for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
  • 0

#3 D'Artagnan

D'Artagnan

    Godlike Member

  • Membres
  • 2 138 messages

Posté 03 mars 2002 - 12:18

heu t'as voulu faire quoi la ? :P

kikou, il s'agit de menu java script tu en trouvera ici des tout fait tu as juste a changer les parametres
  • 0

#4 kikou

kikou

    Member

  • Membres
  • 44 messages

Posté 03 mars 2002 - 10:32

Merci bien les gars, c cool
  • 0

#5 kikou

kikou

    Member

  • Membres
  • 44 messages

Posté 03 mars 2002 - 12:29

rebonjour tout le monde
Bon, j'ai un pb :
Je suis allé downloadé le fichier fade.js sur le site
http://anarchos.xs.mw/fade.phtml
bon, une fois le fichier dl, je suis allé dans le code de ma page, entre <HEAD> et

</HEAD> j'ai appelé le javascript :
<script src="fade.js" language="Javascript"></script>
et entre <body> et </body>, je créé un lien avec les indication qu'il y a sur la page

(le class="fade")
<a href="http://www.zebulon-fr.com" class="fade">bonjour</a>

Mais j'ai juste un lien ordinaire sans le " fade " aidez moi svp
désolé, je suis nouveau dans le métier :P
  • 0

#6 kikou

kikou

    Member

  • Membres
  • 44 messages

Posté 03 mars 2002 - 01:31

C bon, j'ai fini par trouver, merci quand meme
  • 0