composant : choix des couleurs du site

**JLC83** · 13/08/2010, 15h25

Bonjour,
Notre client ne partage pas nos goûts en matière de couleurs malgré une charte graphique pré-négociée.
Il souhaite que l'utilisateur puisse choisir "à chaud" les couleurs de certains objets d'interface.
Nous travaillons donc à mettre en place un composant :

Sur click : affichage d'une pallette
La palette (fenêtre || frame || x ?) affiche une grille des 256 couleurs
Sur clic d'une des couleurs on modifie css...

Avez-vous déjà fait ?
Quelques conseils seraient les bien venus...
Merci

**javatwister** · 13/08/2010, 18h07

salut

le principe d'une palette est sans doute indispensable, histoire de ne pas dire au client: "entre le code de la couleur qui te plaît";

tu adjoins une petite liste des éléments clés modifiables (pointés en select ou checkbox, encore mieux)

après, définis très clairement le nombre d'objets html susceptibles de changer de couleur;

modifier la css sur sélection, oui, c'est le principe!

**kimjoa** · 13/08/2010, 23h23

salut , pour la palette il en existe plein sur le web.

Sinon , soit tu utilises un sélecteur de css, et tu modifies dans les classes ,préalablement répertoriées, les propriétés susceptibles de changer.
Ou, tu modifies directement les règles des feuilles de styles. Ce qui nécessitera , soit un plug-in si t'utilises une librairie, soit tout écrire à la main. (mais c'est pas trop compliqué).

La deuxième solution me parait plus propre.

sinon javatwister à abordé un aspect intéressant. Je me demande si un cms propose dans la définition de ses templates de tels outils ... ca serait cool !!

**JLC83** · 14/08/2010, 09h12

Merci !
Selon vous, quel est l'affichage de palette le plus propre et qui est supporté sans trop de code par IE et Firefox ?
Les frames m'ont trop fait craquer par le passé

Merci
JL

**SpaceFrog** · 14/08/2010, 09h24

Demande à

"jquery colorpicker"

**JLC83** · 14/08/2010, 16h05

Merci.
Est-ce gratuit ?
Oui je sais... mais la rentabilité assure mon emploi

JL

**javatwister** · 15/08/2010, 10h52

tiens, pour rire, j'ai repris un vieil exercice: plus économique, tu meurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>chercheur de couleurs</title>
 
<style type="text/css"> 
body {margin:0px}
div.coul {position:relative;height:20px;width:256px;margin-top:10px;}
#test { position:relative;left:400px;top:-80px;height:80px;width:100px;background-color:rgb(0, 0, 0)}
 
</style> 
 
 
</head> 
<body>
 
<div>
<div id="gr">
<div class="coul"style="background-color:red;color:red;left:50px"></div>
<div class="coul"style="background-color:lime;color:green;left:50px"></div>
<div class="coul"style="background-color:blue;color:blue;left:50px"></div>
</div>
<div id="test"> </div> 
</div>
 
 
 
<script type="text/javascript"> 
var fond, clico=true, obj, pos, col, d;
var t={"red":0,"green":0,"blue":0};
 
function move(e){
	obj=!e ?  event.srcElement : e.target;
	pos=!e ? event.offsetX:e.pageX - parseInt(obj.style.left);
	col=obj.style.color;
	if(clico){
		t[col]=pos;
		fond='rgb('+t["red"]+', '+t["green"]+', '+t["blue"]+')'
		document.getElementById('test').style.backgroundColor=fond
	}
}
 
function declic(){// en cliquant une bande, tu bloques la couleur courante;
	clico= !clico ? true : false;
}
 
d=document.getElementById('gr').getElementsByTagName("div");
for(i in d){
	d[i].onmousemove=move;
	d[i].onclick=declic
}
 
 
</script> 
 
 
</body> 
</html>