Prévisualisation de couleur Hexa contenu dans un champ

**Maxow** · 20/01/2008, 19h19

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 :

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

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

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

Voici un exemple de code :

Code :

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

1
2
3
4
<tr>
<th valign="top">Couleur du Texte</th>
<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="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.

**Maxow** · 21/01/2008, 20h46

Petit UP :

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

- 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)")

**SpaceFrog** · 21/01/2008, 21h19

les deux passent sur IE comme FFX ...

**Maxow** · 22/01/2008, 12h58

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

M@x.

**SpaceFrog** · 22/01/2008, 14h40

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

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

**Maxow** · 22/01/2008, 18h20

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 :

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

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 !

**SpaceFrog** · 22/01/2008, 18h40

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

**Maxow** · 22/01/2008, 18h48

D'accord. Juste la dernière petite chose en gras (Parce que tout le reste fonctionne

) comment on fait pour appeler une fonction depuis une pop-up ouverte depuis la même page ?

**SpaceFrog** · 22/01/2008, 19h30

Code :

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

self.opener.mafonction()

**Maxow** · 22/01/2008, 19h35

Arf, merci trop fort !

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

Code :

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

self.opener.document.showdemocouleur();

Ne fonctionnait pas forcément...

GOOD THANKS !

**SpaceFrog** · 22/01/2008, 19h43

la fonction appartient à la fenetre et n'est pas un objet du document ..

**Maxow** · 22/01/2008, 19h46

La prochaine fois, je saurait !

**Maxow** · 22/01/2008, 20h16

Encore un petite question

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

**SpaceFrog** · 22/01/2008, 20h30

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 :

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

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

Code :

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

<body  onload="init()" >

**Maxow** · 22/01/2008, 20h45

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 :

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

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

**SpaceFrog** · 22/01/2008, 21h01

ben c'est toi qui connait les id de tes objets ...

**Maxow** · 22/01/2008, 23h13

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

M@X;

**SpaceFrog** · 23/01/2008, 09h29

arf oui mais non

en fait il faut faire :

Code :

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

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.

**Maxow** · 23/01/2008, 19h37

Ok, merci !

Prévisualisation de couleur Hexa contenu dans un champ

JavaScript

Discussions similaires

Partager

Partager