[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...

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:

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 .... :roll:

 

[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 :lol:
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)):

//------ 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 :

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

 

[comparef]

c'est précisement ce que ce script fait

biensur a chaque fois que tu change le fond de ta page, il faut aussi que les parametres "rouge" "vert" et "bleu" soit changé en fonction du nouveau fond.

 

[trustno1]

j'ai testé mais ca marchait pas

 

[comparef]

il faudrait que tu dise précisément ce que tu fait, et précisément ce que ça fait, parce que ce script marche, c'est sur (je l'utilise souvent et ça a toujours marché).
Mais la c'est un peut dure de t'aider sans avoir plus de précisions...

 

[trustno1]

Merci.
Voila, j'ai crée un fichier .php, j'ai mis le code suivant :

<?

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

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


le bgcolor est noir, mais le texte est aussi noir, donc le script ne marche pas. ou peu etre que je ne sais pas comment se servir du script

 

[comparef]

Non, en faite a la place de "rouge" "vert" "bleu", il faut mettre le code couleur de ton fond (Noir = 000000) or, dans ton code, tu a mis blanc :FFFFFF

prend ca, ca marche :

<?php 

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

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

 

[trustno1]

Bon, ca marche pour le fond noir donc code couleur #000000, mais quand je change la couleur du fond, vers le blanc, le texte ne change pas de couleur ! sauf si je met:
if (0.3*(hexdec(ff)) + 0.59*(hexdec(ff)) + 0.11*(hexdec(ff)) <= 128)

ce que je cherche c'est quand j'appelle le lien :
-www.monsite.com/page.php?fond=code de couleur

le texte de la page (page.php) change (automatiquement) selon la couleur choisi dans le lien (-www.monsite.com/page.php?fond=code de couleur) <body bgcolor=$fond>

<?php

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

echo"<body bgcolor=$fond><font color='".$couleur."'>Maison</font>";
?>

j'espere etre clair, et merci pour votre aide et votre patience

 

[Haq]

Utilise la fonction substr() pour couper ta variable $fond en trois.

 

[trustno1]

merci, mais comment faire ?
je pense que je n'arrive plus à mettre en place ce systeme

Quand on choisi un fond foncé, le texte se change automatiquement en couleur claire, et quand on choisi un fond clair le texte deviendra foncé.

Merci pour votre aide.

comparef, je pense que nous ne sommes pas loin de le faire fonctionner.

 

[comparef]

Bonjour,
OUI ! TU VAS Y ARRIVER !

voila comment tu peut proceder :

<?php

//la ligne ci-dessous sert a enlever le #
$couleur_fond =str_replace("#","",$fond);

//les 3 ligne ci dessous servent a séparer le code couleur du fond en 3
$rouge=substr($couleur_fond, 0, 2); // les 2 premieres lettres
$vert=substr($couleur_fond, 2, 2); // les 2 lettres du milieu
$bleu=substr($couleur_fond, 4, 2); // les 2 dernieres lettres

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

echo"<body bgcolor=$fond><font color='".$couleur."'>Maison</font>"; 
?>

Voila, la variable "fond qu'il y a dans ton adresse doit etre de la forme #XXXXXX (avec le #)...

A++
Robin

 

[trustno1]

Mille merci Robin, ca marche nickel !
Merci à vous tous

 

[comparef]

de rien

bonne continuation
a++

 

[Phix]

Merci à tous ceux qui ont contribué à ce post, il m'a été bien utile pour un site que je suis en train de développer.

Pour ceux qui souhaitent utiliser une version Javascript de ce script, voici le code :

function getTxtCouleur(hex) {
        //Le paramètre passé est de la forme #xxxxxx
	if((0.2125*parseInt(hex.substr(1,2), 16) + 0.7154*parseInt(hex.substr(3,2), 16) + 0.0721*parseInt(hex.substr(5,2), 16)) <= 128)
		return "#FFFFFF";
	else 
		return "#000000";
}

 

[vinset]

Tu sais pour Adsense, ils ne sont pas allez chercher bien loin...
(...)
Voilà ce n'était pas plus compliqué que ça ..., en espérant n'avoir perdu personne en cours de route...

Wouaou, quelle explication de la mort !
Une reco pour moi, je pense que ça peut être aussi super utile si on propose aux internautes de choisir eux-même la couleur de leur interface.