composant : choix des couleurs du site

Version imprimable

13/08/2010, 15h25
JLC83

composant : choix des couleurs du site
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
13/08/2010, 18h07
javatwister

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!
13/08/2010, 23h23
kimjoa

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 !!
14/08/2010, 09h12
JLC83

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
14/08/2010, 09h24
SpaceFrog

Demande à :google: "jquery colorpicker"
14/08/2010, 16h05
JLC83

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

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

Code:

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>

16/08/2010, 09h37
bigboomshakala

Citation:

Envoyé par JLC83

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

Citation:

jquery, c'est gratuy.
donc en joie, pour ton emploi!

:mouarf:
16/08/2010, 15h18
JLC83

Merci :ccool: