Script JavaScript

Fermé
salyxo Messages postés 10 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 31 janvier 2015 - 13 avril 2011 à 14:51
salyxo Messages postés 10 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 31 janvier 2015 - 13 avril 2011 à 18:14
Bonjour,

Si je connais très bien php, je suis néophyte avec JavaScript.
Voici ce que j'aimerais faire :
J'ai un script de palette de couleur. Quand on clique sur le nuancier, le code couleur s'affiche dans un champ de formulaire et j'affiche dans un champ voisin la couleur en background.
Le script fonctionne très bien, mais j'aimerais y apporter une amélioration permettant avec le même nuancier de sélectionner plusieurs couleurs.
Ainsi, au chargement de la page, au premier clic sur le nuancier, la première couleur est sélectionnée. Au second clic, on sélectionne la seconde couleur ainsi de suite jusque 10 couleurs différentes.

Si je veux utiliser JS, c'est pour ne pas recharger la page.

Voici le codage :

<script>
bloc1 = true;
function hexa1(couleur1)
{
  if(bloc1)
  {
	document.form.n_coul1.value = couleur1;
	document.getElementById('couleur1').style.background=couleur1
  }
}
function palette1()
{
  document.write("<TABLE border='0' cellpadding='0' cellspacing='0' ><TR>"); 
  var h=new Array('00','33','66','99','CC','FF'); 
  var col=""; 
  for(var i=0;i<6;i++)
  {
	for(var j=0;j<6;j++)
	{
	  for(var k=0;k<6;k++)
	  {
		col="#"+h[i]+h[j]+h[k];
		document.write
		(
		  "<TD width='10' height='10' bgcolor='"+col+"' onMouseOver=\"hexa1('"+col+"')\" onClick=\"if(bloc1) { bloc1 = false; } else { bloc1 = true; }\"></TD>"
		)
	  }
	}
	document.write("</tr>");
  }
  document.write("</TABLE>");
}
</script>

Et dans le HTML :
<form name="form">
<SCRIPT language="JavaScript">palette1();</SCRIPT>
<INPUT type='text' name='aff1' id='couleur1' size='10'>
<input type="text" name="n_coul1" size="9">
</form>


Ça fonctionne très bien pour 1 couleur... J'ai éiliminé l'option d'afficher 10 nuanciers, ce serait trop gros sur la page.

En fait, il faudrait donc déclarer un compteur à 1 lors du chargement, qui s'incrémente à chaque clic jusque 10, puis revient à 1 au lieu de passer à 11 et qui renverrait aux champs couleur1, 2, 3... jusque 10.

Si vous aimez les défis, ce qui serait bien ce serait de pouvoir modifier une couleur après avoir choisi, mais là, ça devient compliqué.

Merci à tous.
A voir également:

3 réponses

Profil bloqué
13 avril 2011 à 15:07
pour ma par jaurais meler php et javascript. vois tu ce que je ve dire?
0
salyxo Messages postés 10 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 31 janvier 2015
13 avril 2011 à 15:32
L'ennui, c'est que pour PHP, il faut recharger la page : langage côté serveur...
0
Profil bloqué
13 avril 2011 à 15:52
<script type="text/javascript">
2. //<![CDATA[
3. function ecrirecouleur() {
4. var i, j, k;
5. var hexadecimal = new Array('00', '33', '66', '99', 'CC', 'FF');
6. i = 0; while (i < 6) {
7. couple1 = hexadecimal[i]; if (i > 0) document.write('<br\/>'); i++;
8. j = 0; while (j < 6) {
9. couple2 = hexadecimal[j]; j++;
10. k = 0; while (k < 6) {
11. couple3 = hexadecimal[k];
12. codecouleur = couple1 + couple2 + couple3;
13. document.write('<span style="cursor: default; background:#' + codecouleur + '" onmouseover="document.getElementById(\'vision\').style.backgroundColor=\'#' + codecouleur + '\';" onclick="alert(\'#' + codecouleur + '\');">  <\/span>');
14. k++;
15. }
16. }
17. }
18. } //Nota: si vous changez le nombre de couples dans le tableau, faites varier les valeurs maximales de i j et k.
19. //]]>
20. </script>
ce code permet e creer un tableau de 216 couleurs il ya ici 3 chaine imbriquer les une dans les autres jespere que sa taidera
0
Profil bloqué
13 avril 2011 à 16:39
alors?
0
salyxo Messages postés 10 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 31 janvier 2015
13 avril 2011 à 18:14
J'ai essayé, mais sans résultat probant.
Finalement, j'ai opté pour une autre solution car je suis dans l'urgence.
Si j'arrive à trouver une solution par la suite, je le ferai... mais pour le moment...

Pour info, j'avais trouvé le script ici :
http://www.editeurjavascript.com/scripts/scripts_formulaires_3_505.php
Ça le montre en fonctionnement.
J'ai juste ajouté un champ text dans lequel la couleur s'affiche en background.

Mais le but du jeu, c'est en fait de pouvoir, avec le même nuancier (fonction palette) sélectionner une première couleur au premier clic, une seconde au second clic, etc.

Bref, la même chose que le script, mais multiplié par 10 sans devoir afficher 10 nuanciers...

Si cela te tente, n'hésite pas... Je reprendrais ma page et y intégrerais le script. Mais pour le moment, je suis vraiment dans l'urgence avec ce site... J'ai donc opté pour l'affichage des 10 nuanciers.... ouch ! Ça fera le job en attendant mieux.
0