Prévisualisation de couleur Hexa contenu dans un champ

Version imprimable

Bonjour à tous,

Je suis en train de coder une page demandant aux utilisateurs de choisir une couleur via une pop-up. Une fois cette couleur sélectionné et validé, j'aimerais que l'utilisateur puisse pré-visualiser celle-ci via un petit rectangle.
Je ne suis pas super balaise en JS, je bidouille pas mal mais j'aimerais biens que vous m'indiquiez exactement la marche à suivre.

Je pense qu'il faut utiliser ce genre de code :

Code:

document.getElementById("tonDivColorise").style.backgroundColor = valeurHexadecimale;

Mais je ne sais pas comment l'utiliser...

Voici un exemple de code :
Code:

1 2 3 4 <tr> <th valign="top">Couleur du Texte</th> <td> #<input type="text" name="style[couleur_text]" id="couleur_text" size="5" maxlength="7" /> <img src="../sources/img/color.gif" class="img_style" border="0" onClick="choix_couleur('couleur_text', window.document.forms['style_edit'].couleur_text.value );"> Couleur générale du texte. (Sauf liens, Titre et légende)</td> </tr>
Et donc ajouter un champ de pré-visualisation.

Merci de votre aide,
M@x.

21/01/2008, 20h46
Maxow

Petit UP :

On m'a parlé d'une différence entre IE et FF ?

Citation:

- sur IE, c'est une valeur hexa qu'il faut donner (#xxxxxx)
- sur FF, c'est un triplet rgb décimal ("rgb(nn, nn, nn)")
21/01/2008, 21h19
SpaceFrog

les deux passent sur IE comme FFX ...
22/01/2008, 12h58
Maxow

Merci de ta réponse, mais çe ne m'aide que un tout petit peu :roll:

M@x.

Après encore faut il saisir une valeur correcte ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type='text/javascript'>
function showdemocouleur(){
document.getElementById('demo').style.backgroundColor="#"+document.getElementById("couleur_text").value;
}
</script>
 
<body>
<table>
<tr>
	<td>&nbsp;#<input type="text" name="style[couleur_text]" id="couleur_text" size="5" maxlength="7" /> <img src="../sources/img/color.gif" class="img_style" border="0" onClick="showdemocouleur();"> Couleur générale du texte. (Sauf liens, Titre et légende)</tr>
<tr>
	<td id="demo">&nbsp; </td>
</tr>
 
</table>
</body>

Merci bien de ta proposition qui fonctionne correctement mais ce n'est pas exactement ce que je souhaite :

Au fait l'utilité principale c'est que j'aimerais que la couleur du texte change lorsque l'on modifie le champ en lui même, pas lorsque l'on clique sur le lien de l'image.

J'espère que tu comprend et que tu peut encore m'aider.

M@x.

EDIT : j'ai testé avec onKeyUp mais le résultat ne me convient pas parfaitement, car il ne modifie pas à chaque ajout de lettre la couleur

EDIT 2 : Je pense avoir trouvé :
Code:

1 2 3 4 5 6 7 8 9 function DemoCouleur(){ var str=document.getElementById("couleur_text").value; str=str.toUpperCase().replace(/[^0-9A-F]/,""); if (str.length==6){ imgdemo = document.all? eval("document.all.demo") : document.getElementById("demo"); imgdemo.style.color = str; } champ.value=str; }
et un onKeyUp sur le champ qui appelle cette fonction.

Sujet actuelle :
Maintenant, il me manque une petite chose. Le clic sur l'image ouvre une pop-up me permettant de choisir le couleur, mais j'aimerais une fois que la pop-up se ferme que le contenu de du champ s'actualise (La pop-up modifie le contenu du champ par une couleur toujours Hexa). En gros appeler une fonction sur ma page depuis ma pop-up !

22/01/2008, 18h40
SpaceFrog

si tu colles un petit setTImeout sur la modif du style cela boitouille parcequ'a chaque ajout de caractère ne correspond pas une valeur hexa interprétable ...

par exemple pour sasir ffffff il faut commencer par taper f ...
et sur le onkeyup du premier f il te retournera une valuer incorrecte de propriété car il ne peut par interpéter #f comme un code couleur ...
22/01/2008, 18h48
Maxow

D'accord. Juste la dernière petite chose en gras (Parce que tout le reste fonctionne :D) comment on fait pour appeler une fonction depuis une pop-up ouverte depuis la même page ?
22/01/2008, 19h30
SpaceFrog

Code:

self.opener.mafonction()
22/01/2008, 19h35
Maxow

Arf, merci trop fort !

J'avais trouvé sur ce même forum :

Code:

self.opener.document.showdemocouleur();

Ne fonctionnait pas forcément... :)

GOOD THANKS !
22/01/2008, 19h43
SpaceFrog

la fonction appartient à la fenetre et n'est pas un objet du document ..
22/01/2008, 19h46
Maxow

La prochaine fois, je saurait ! ;)
22/01/2008, 20h16
Maxow

Encore un petite question :roll: (La dernière, promis !)

Mes champs, au chargement de ma page sont pré-remplis et j'aimerais donc "activer" la fonction dés le chargement. Si je n'avait que un champ à "prévisualiser" ce serait facile mais j'en ai plusieurs...

Je sais qu'il faut utiliser " onload="" " dans le <body mais je en vais pas mettre chaque fonction pour tous les exemples car il en faudrait beaucoup.

En-tête de ma fonction ;
function showdemocouleur(id_champ, id_preview)

Je pense qu'il faudrait faire une boucle depuis un array dans une autre fonction ? Mais de tout façons je ne sais pas faire, j'en revient (encore et toujours) à vous...

Merci,
M@x.
22/01/2008, 20h30
SpaceFrog
Tout dépend du nombre de champs ...
masi pour faire un truc rapide et simple sans t'embarquer dans des boucles et des arrays :
Code:

1 2 3 4 function init(){ new function showdemocouleur('champs1', 'preview1') new function showdemocouleur('champs2', 'preview2') new function showdemocouleur('champs3', 'preview3')}
Code:

<body onload="init()" >

Le code que tu m'a passé ne fonctionnait pas :

J'ai donc modifié comme suit, je ne sais pas si ça pose soucis ?
Code:

1 2 3 4 5 function init(){ showdemocouleur('couleur_fond', 'couleur_fond_preview') showdemocouleur('couleur_text', 'couleur_text_preview') showdemocouleur('champs3', 'preview3') }

22/01/2008, 21h01
SpaceFrog

ben c'est toi qui connait les id de tes objets ...
22/01/2008, 23h13
Maxow

:mouarf: Ca je sais, je parlais des "new function ".

M@X;
23/01/2008, 09h29
SpaceFrog
arf oui mais non :mouarf:

en fait il faut faire :
Code:

1 2 3 4 function init(){ new showdemocouleur('champs1', 'preview1') new showdemocouleur('champs2', 'preview2') new showdemocouleur('champs3', 'preview3')}
le new créant une nouvelle instance de la fonction... ce qui d'une part évite que javascript s'emmèle entre ses variables et d'autre part accélère le traitement.
23/01/2008, 19h37
Maxow

Ok, merci !