[Resolu] couleur du texte selon la couleur du fond

[trustno1]

Bonjour,
Je cherche un javascript pour changer la couleur du texte automatiquement selon la couleur du fond, comme c'est le cas de (Annonces Gooooogle) de adsense.

Merci

[CaYuS]

Bonjour,

Dans quelles conditions veux tu utiliser cela ?
Je veux dire, je ne comprends pas très bien ta question :
Si tu as le "pouvoir" de changer la couleur de fond, que t'en coûte t'il de rajouter une ligne de code pour changer également la couleur du texte, sans avoir à passer par du javascript ?

[trustno1]

Par exemple quand on choisi une couleur foncé pour l'arrière plan, le texte changera de couleur automatiquement pour une couleur claire. juste comme les annonces de Adsense.

[CaYuS]

Tu sais pour Adsense, ils ne sont pas allez chercher bien loin...
Ils se sont dit qu'une couleur en informatique a pour l'habitude d'être exprimée en hexadecimal avec des valeurs de Rouge, Vert et bleu (RRVVBB = Où chaque lettre vaut respectivement une variable allant de 0 1 2 3 4 ... à.... C D E F correspondant à un nombre allant de 0 à 16 qui est multiplié par son voisin de même nature)
Ils savant que chacune de ces valeurs est alors donnée sur une échelle de (16*16) 256 couleurs ( de 0 à 255 ).
La moitié de 256 étant 128, ils ont décidé de se servir de cette valeur comme témoin.
Ils ont alors essayé de créer une valeur moyenne de la couleur de fond choisie par l'internaute sur une échelle de 0 à 256 qu'ils compareraient ensuite à la valeur témoin.
Si elle est inférieur ou égale à 128 le texte serait blanc, sinon, il serait noir.

Ils se sont demandés quelles étaient les couleurs les plus lumineuses entre le rouge, le vert, et le bleu, puis ils leur ont appliqués un pourcentage arbitraire (en s'assurant que la somme des pourcentages fasse bien 100%).
Rouge : 30%
Vert : 59%
Bleu : 11%

Ramené sur un coefficient unitaire, cela donne :
Rouge: 0.3
Vert : 0.59
Bleu : 0.11

A partir de là ils se sont rappelés comment étaient écrites les couleurs en hexadécimal (ce qu'on a vu plus haut) et ils ont crée une petite fonction afin de convertir la valeur de fond choisie par l'internaute en valeur décimal (de 0 à 255) de Rouge, Vert, et Bleu.

Il ne leur restait plus qu'à faire une petite comparaison...

Code: Tout sélectionner

SI
0.3*(decimal[rouge]) + 0.59*(decimal[vert]) + 0.11*(decimal[bleu])
EST INFERIEUR OU EGAL A 128
couleur_de_texte = #FFFFFF;
SINON
couleur_de_texte = #000000;

Voilà ce n'était pas plus compliqué que ça ..., en espérant n'avoir perdu personne en cours de route...

[Blini]

Une petite précision: les poids attribués au R/V/B sont généralement:

Code: Tout sélectionner

pR = 0.2125;
pG = 0.7154;
pB = 0.0721;

Ce sont d'ailleurs ces poids qui sont utilisés (généralement*, je répète) pour convertir une image couleur en niveaux de gris.

(*) parce que ça dépend des tubes cathodiques, tout ça, voyez-vous...

[CaYuS]

Merci pour la précision ... je me suis contenté pour ma part de reprendre les valeurs utilisées par le Monsieur de chez Google

[trustno1]

Merci pour votre explication.
J'ai essayé d'intégrer le code dans une page php, mais ce marchait pas.

[CaYuS]

Euh ... rassure moi... tu n'as pas intégré le code tel que je l'ai donné, sans rien changer ?
Je commence à avoir peur ....

[trustno1]

voila le code que j'ai mis :

if
0.3*(decimal[rouge]) + 0.59*(decimal[vert]) + 0.11*(decimal[bleu])
< 128 then
$couleur_de_texte = #FFFFFF;
else
$couleur_de_texte = #000000;

je ne suis pas fort en php.

[CaYuS]

Ergh ...
Mon code n'était qu'une illustration de ma démonstration ... il est tout à fait non fonctionnel tel quel.
Par contre je ne vais pas pouvoir plus t'aider si tu veux faire ce genre d'application en Javascript, car ce n'est pas un langage dans lequel je mets souvent mon nez.
Néanmoins, tu trouveras tous les scripts js nécessaires en jetant un oeil à la source de la page "Couleurs des annonces" de Google Adsense.

Si tu as la motivation de te pencher dessus.. bon courage

[Blini]

je ne suis pas fort en php.

Euhh... Ben surtout que tu parles de javascript dans ton premier post
Quelques pistes (pour du javascript):
- d'abord accéder à l'élément qui t'intéresse et récupérer la couleur de son texte (recherche getElementById et récupération du style associé)
- écrire un peu de code pour calculer la couleur de fond (une fois que tu as le code hexa de la couleur, utilises les substring pour extraire les canaux R,V et B, puis la fonction parseInt(str, 16) pour convertir en décimal)
- reconstituer le code hexa de ta couleur de fond (méthode toString(16))
- attribuer cette couleur au background de ton élément (getElementById.style.backgroundColor = blabla ou un truc du genre)

Le code suivant pourra peut-être t'aider (bound, c'est une fonction qui contraint une valeur entre 0 et 1, genre max(min(val, 1), 0), et les this.r, this.g, this.b, ce sont les valeurs rgb sur [0,1] (c'est tiré d'une classe)):

Code: Tout sélectionner

//------ RGB vers #xxxxxx
function RGBtoHEX()
{
   var strTot = "#";
   var str = "";
   var i;
   i = Math.round(this.r * 255); str = i.toString(16); if (str.length == 1) str = "0" + str; strTot += str;
   i = Math.round(this.g * 255); str = i.toString(16); if (str.length == 1) str = "0" + str; strTot += str;
   i = Math.round(this.b * 255); str = i.toString(16); if (str.length == 1) str = "0" + str; strTot += str;
   strTot = strTot.toUpperCase();
   return strTot;
}

//------ #xxxxxx vers RGB
function HEXtoRGB(str)
{
   var rgb = new RGB(0, 0, 0);
   if (str.length != 7)
      return rgb;
   rgb.r = bound(parseInt(str.substr(1,2), 16) / 255.0);
   rgb.g = bound(parseInt(str.substr(3,2), 16) / 255.0);
   rgb.b = bound(parseInt(str.substr(5,2), 16) / 255.0);
   return rgb;
}


[comparef]

et en php, ca donne :

Code: Tout sélectionner

if (0.3*(hexdec(rouge)) + 0.59*(hexdec(vert)) + 0.11*(hexdec(bleu)) <= 128)
{
$couleur = "#FFFFFF";
}
else
{
$couleur = "#000000";
}

Pour ceux que ca peut interresser...

[trustno1]

Bonjour à tous

J'ai essayé avec ce code mais ca marche pas

<?

if (0.3*(hexdec(rouge)) + 0.59*(hexdec(vert)) + 0.11*(hexdec(bleu)) <= 128)
{
$couleur = "#FFFFFF";
}
else
{
$couleur = "#000000";
}

echo"<body bgcolor=#ffffff><font color=$couleur>Maison</font>";
?>

le bgcolor est blanc, et le texte (Maison) blanc aussi, donc le code n'a rien changé

[comparef]

Bonjour à tous

J'ai essayé avec ce code mais ca marche pas

<?

if (0.3*(hexdec(rouge)) + 0.59*(hexdec(vert)) + 0.11*(hexdec(bleu)) <= 128)
{
$couleur = "#FFFFFF";
}
else
{
$couleur = "#000000";
}

echo"<body bgcolor=#ffffff><font color=$couleur>Maison</font>";
?>

le bgcolor est blanc, et le texte (Maison) blanc aussi, donc le code n'a rien changé

il ne faut pas applique ce code tel quel, voici les element a changer (en rouge):

if (0.3*(hexdec(rouge)) + 0.59*(hexdec(vert)) + 0.11*(hexdec(bleu)) <= 128)
{
$couleur = "#FFFFFF";
}
else
{
$couleur = "#000000";
}

ces élément sont le code couleur de ton fond, par exemple, si le code couleur de ton fond est #05A56E et bien tu mettra 05 a la palce de "rouge", A5 a la place de "vert" et 6E a la place de "bleu".

Dans ton cas, #FFFFFF, tu mettra FF dans chaque.

[trustno1]

oui, c'est bon maintenant merci.

mais ça ne donne pas le même resultat que sur google adsense.
Par exemple:
Quand on choisi un fond noir (ou une plage de couleurs foncés) le texte doit etre blanc
et quand on choisi un fond blanc (ou plage de couleurs clairs) le texte doit être noir.

Merci pour votre aide