[Resolu] couleur du texte selon la couleur du fond

WRInaute occasionnel
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
 
WRInaute occasionnel
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 ?
 
WRInaute occasionnel
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.
 
WRInaute occasionnel
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:
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... ;)
 
WRInaute occasionnel
Une petite précision: les poids attribués au R/V/B sont généralement:
Code:
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...
 
WRInaute occasionnel
Merci pour la précision ... je me suis contenté pour ma part de reprendre les valeurs utilisées par le Monsieur de chez Google ;)
 
WRInaute occasionnel
Merci pour votre explication.
J'ai essayé d'intégrer le code dans une page php, mais ce marchait pas.
 
WRInaute occasionnel
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:
 
WRInaute occasionnel
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.
 
WRInaute occasionnel
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 ;)
 
WRInaute occasionnel
trustno1 a dit:
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)):
Code:
//------ 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;
}
 
WRInaute occasionnel
et en php, ca donne :

Code:
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...
 
WRInaute occasionnel
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é
 
WRInaute occasionnel
trustno1 a dit:
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.
 
WRInaute occasionnel
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
 
WRInaute occasionnel
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.
 
WRInaute occasionnel
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...
 
WRInaute occasionnel
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
 
WRInaute occasionnel
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 :

Code:
<?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>"; 
?>
 
WRInaute occasionnel
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
 
WRInaute occasionnel
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.
 
WRInaute occasionnel
Bonjour,
OUI ! TU VAS Y ARRIVER ! ;)

voila comment tu peut proceder :

Code:
<?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
 
WRInaute occasionnel
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 :

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";
}
 
WRInaute discret
CaYuS a dit:
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.
 
Discussions similaires
Haut