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 !

Prévisualisation de couleur Hexa contenu dans un champ

JavaScript

Vue hybride

Discussions similaires

Partager

Partager