Changer images lors d'un clic

Version imprimable

Bonjour à tous,

Ne m'y connaissant pas trop en javascript, je viens vers vous pour un peu d'aide.
Voilà mon problème : J'aimerais que lorsque je veux modifier la note d'un joueur et que je sélectionne par exemple "3" au lieu de "4" que tous les autres chiffres soient désactivés (en gris donc).

Voir ici : http://www.hostingpics.net/viewer.ph...1679304680.jpg

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
	<!--
		div.zone_trans
		{height: 1px;
		width: 1px;
		overflow: hidden;}
	-->
	</style>
<?php echo "<FORM ACTION=\"verif_votes.php\" METHOD=\"POST\">
<div class=\"zone_trans\"><input type=\"radio\" name=\"data[1]\" id=\"1\" value=\"1\"></div>
<div class=\"zone_trans\"><input type=\"radio\" name=\"data[2]\" id=\"2\" value=\"2\"></div>
<div class=\"zone_trans\"><input type=\"radio\" name=\"data[3]\" id=\"3\" value=\"3\"></div>
<div class=\"zone_trans\"><input type=\"radio\" name=\"data[4]\" id=\"4\" value=\"4\"></div>
<div class=\"zone_trans\"><input type=\"radio\" name=\"data[5]\" id=\"5\" value=\"5\"></div>
<label for=\"1\"><img src=\"images/1.gif\" onclick=\"this.src='images/1-0.gif'\"></label>
<label for=\"2\"><img src=\"images/2.gif\" onclick=\"this.src='images/2-0.gif'\"></label>
<label for=\"3\"><img src=\"images/3.gif\" onclick=\"this.src='images/3-0.gif'\"></label>
<label for=\"4\"><img src=\"images/4.gif\" onclick=\"this.src='images/4-0.gif'\"></label>
<label for=\"5\"><img src=\"images/5.gif\" onclick=\"this.src='images/5-0.gif'\"></label>
<INPUT TYPE=\"submit\" name=\"envoi\" VALUE=\"Enregistrer\">";?>

Merci beaucoup :D

Bonsoir,
tout d'abord on va commencer par les bases
- les ID ne doivent pas commencées par des chiffres, dont pas de 1, 2 etc mais ici tu peux mettre 'note_1', 'note_2' pour tes INPUT type="radio"
- inutile de mettre une DIV autour de chaque INPUT pour les cacher, une globale est suffisante
- si tu veux une interaction entre tes INPUT type="radio", il faut qu'ils aient tous les même NAME, ici tu peux mettre par exemple note.
Voila pour commencer et pour la partie HTML.

Concernant la partie javascript, il existe plusieurs méthodes je t'en livre une
exemple complet

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
62
63
64
65
66
67
68
69
70
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
div.zone_tran_s {
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.img_no_select {
  border : 1px solid red;
  background-color : red;
}
.img_select {
  border : 1px solid black;
  background-color : yellow;
}
</style>
</head>
<body>
<form action="verif_votes.php" method="POST" name="vote">
  <div class="zone_trans">
    <input type="radio" name="note" id="note_1" value="1">
    <input type="radio" name="note" id="note_2" value="2">
    <input type="radio" name="note" id="note_3" value="3">
    <input type="radio" name="note" id="note_4" value="4">
    <input type="radio" name="note" id="note_5" value="5">
  </div>
  <div>
    <label for="note_1"><img src="images/1.gif" alt="1"></label>
    <label for="note_2"><img src="images/2.gif" alt="2"></label>
    <label for="note_3"><img src="images/3.gif" alt="3"></label>
    <label for="note_4"><img src="images/4.gif" alt="4"></label>
    <label for="note_5"><img src="images/5.gif" alt="5"></label>
    <input type="submit" name="envoi" value="Enregistrer">
  </div>
</form>
<script type="text/javascript">
(function(){
  // recup des images
  var oParent, oImg = document.forms['vote'].getElementsByTagName('IMG');
  var i, nb = oImg.length;
  for( i = 0; i < nb; i++){
    // style no select
    oImg[i].className = "img_no_select";
    // recup le radio bouton associe because IE
    oParent = oImg[i].parentNode;
    oImg[i].radio = document.getElementById( oParent.htmlFor);
    // fonction sur le onclick
    oImg[i].onclick = function(){
      // traite toutes les images
      for( i=0; i < nb; i++){
        // changement classe
        oImg[i].className = "img_no_select";
        // modification source
        oImg[i].src = oImg[i].src.replace( '-0', '');
      }
      // traite l'image cliquee
      this.className = "img_select";
      this.src = this.src.replace( '.gif', '-0.gif');
      // because IE
      this.radio.checked = true;
    };
  }
})();
</script>
</body>
</html>

La source est abondamment commentée, enfin il me semble, mais si il reste des points à éclaircir n'hésites pas.

La fonction d'initialisation est placée à la fin du fichier afin d'accéder aux éléments une fois crées.

Une partie du code est lié à la carence de IE face aux images dans les LABEL, enfin je ne sais pas si le problème demeure sur les versions récentes.

Merci NoSmoking de ta participation et de tes explications ;)
J'ai essayé d'adapter ton code au mien mais sans succès.
Petite précision, c'est pour noter 11 joueurs donc le code se trouve dans une boucle avec une variable [$i] pour les notes et je pense que c'est pour ça que ça ne marche pas.
J'ai essayé ça entre autres :

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
 
<FORM ACTION=\"verif_votes.php\" METHOD=\"POST\" name=\"vote\">
<div class=\"zone_trans\">	
<input type=\"radio\" name=\"note[$i]\" id=\"note_1[$i]\" value=\"1\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_2[$i]\" value=\"2\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_3[$i]\" value=\"3\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_4[$i]\" value=\"4\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_5[$i]\" value=\"5\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_6[$i]\" value=\"6\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_7[$i]\" value=\"7\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_8[$i]\" value=\"8\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_9[$i]\" value=\"9\">
<input type=\"radio\" name=\"note[$i]\" id=\"note_10[$i]\" value=\"10\"></div>
<label for=\"note_1[$i]\"><img src=\"images/1.gif\" alt=\"1\"></label>
<label for=\"note_2[$i]\"><img src=\"images/2.gif\" alt=\"2\"></label>
<label for=\"note_3[$i]\"><img src=\"images/3.gif\" alt=\"3\"></label>
<label for=\"note_4[$i]\"><img src=\"images/4.gif\" alt=\"4\"></label>
<label for=\"note_5[$i]\"><img src=\"images/5.gif\" alt=\"5\"></label>
<label for=\"note_6[$i]\"><img src=\"images/6.gif\" alt=\"6\"></label>
<label for=\"note_7[$i]\"><img src=\"images/7.gif\" alt=\"7\"></label>
<label for=\"note_8[$i]\"><img src=\"images/8.gif\" alt=\"8\"></label>
<label for=\"note_9[$i]\"><img src=\"images/9.gif\" alt=\"9\"></label>
<label for=\"note_10[$i]\"><img src=\"images/10.gif\" alt=\"10\"></label>
</div>
<INPUT NAME=Send TYPE=image SRC=\"images/enregistrer.gif\" VALUE=\"Send\"></form>
<script type="text/javascript">
(function(){
  // recup des images
  var oParent, oImg = document.forms['vote'].getElementsByTagName('IMG');
  var i, nb = oImg.length;
  for( i = 0; i < nb; i++){
    // style no select
    oImg[i].className = "img_no_select";
    // recup le radio bouton associe because IE
    oParent = oImg[i].parentNode;
    oImg[i].radio = document.getElementById( oParent.htmlFor);
    // fonction sur le onclick
    oImg[i].onclick = function(){
      // traite toutes les images
      for( i=0; i < nb; i++){
        // changement classe
        oImg[i].className = "img_no_select";
        // modification source
        oImg[i].src = oImg[i].src.replace( '-0', '');
      }
      // traite l'image cliquee
      this.className = "img_select";
      this.src = this.src.replace( '.gif', '-0.gif');
      // because IE
      this.radio.checked = true;
    };
  }
})();
</script>

Rien ne se passe lorsque je clique sur les images, elles restent grises (Par contre la sélection du radio est bien prise en compte).
As tu une idée ?
Merci encore pour ton aide ;)

12/04/2011, 10h26
Bovino

Salut.

Pour pouvoir nous permettre de mieux t'aider, merci de poster le code HTML et JavaScript généré et pas le PHP qui est inutile sur des problématiques client.
12/04/2011, 13h33
Billy KiT
Salut,
@ NoSmoking, pour les ignorants comme moi, peux-tu expliquer cette syntaxe
Code:

1 2 3 4 5 <script type="text/javascript"> (function(){ ... })(); </script>
:calim2:
12/04/2011, 13h41
Bovino

Ca revient à exécuter la fonction juste après sa définition.

En regardant de plus près le fonctionnement du code javascript, je m'aperçois qu'il agit sur la balise FORM. Mais étant donné que la notation est comprise dans une boucle (voir image en bas du message), est il possible d'agir sur la div plutôt que sur la balise FORM et d'avoir quelque chose du genre

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
62
63
64
65
66
67
68
69
70
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
div.zone_tran_s {
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.img_no_select {
  border : 1px solid red;
  background-color : red;
}
.img_select {
  border : 1px solid black;
  background-color : yellow;
}
</style>
</head>
<body>
<form action="verif_votes.php" method="POST" name="vote">
  <div class="zone_trans">
    <input type="radio" name="note" id="note_1" value="1">
    <input type="radio" name="note" id="note_2" value="2">
    <input type="radio" name="note" id="note_3" value="3">
    <input type="radio" name="note" id="note_4" value="4">
    <input type="radio" name="note" id="note_5" value="5">
  </div>
  <div name="joueur1">
    <label for="note_1"><img src="images/1.gif" alt="1"></label>
    <label for="note_2"><img src="images/2.gif" alt="2"></label>
    <label for="note_3"><img src="images/3.gif" alt="3"></label>
    <label for="note_4"><img src="images/4.gif" alt="4"></label>
    <label for="note_5"><img src="images/5.gif" alt="5"></label>
    <input type="submit" name="envoi" value="Enregistrer">
  </div>
</form>
<script type="text/javascript">
(function(){
  // recup des images
  var oParent, oImg = document.div['joueur1'].getElementsByTagName('IMG');
  var i, nb = oImg.length;
  for( i = 0; i < nb; i++){
    // style no select
    oImg[i].className = "img_no_select";
    // recup le radio bouton associe because IE
    oParent = oImg[i].parentNode;
    oImg[i].radio = document.getElementById( oParent.htmlFor);
    // fonction sur le onclick
    oImg[i].onclick = function(){
      // traite toutes les images
      for( i=0; i < nb; i++){
        // changement classe
        oImg[i].className = "img_no_select";
        // modification source
        oImg[i].src = oImg[i].src.replace( '-0', '');
      }
      // traite l'image cliquee
      this.className = "img_select";
      this.src = this.src.replace( '.gif', '-0.gif');
      // because IE
      this.radio.checked = true;
    };
  }
})();
</script>
</body>
</html>

http://img4.hostingpics.net/pics/738589304527.jpg

en premier le code que tu livres est assez bizarre avec tout les " échappées (\") ça marche en l'état ?

on peut à peu près tout faire ou pas loin :mouarf:

Code:

1
2
// recup des images
var oParent, oImg = document.div['joueur1'].getElementsByTagName('IMG');

mais ça NON!

sur base de la fonction fournie il suffit de récupérer le conteneur des images, qui peut être n'importe quoi, DIV SPAN FIELDSET etc..., et ensuite ne faire le traitement QUE des images appartenant au même conteneur, c'est clair ?

Le seul impératif est donc d'encadrer les images correspondant à un joueur dans un même conteneur
exemple

Code:

1
2
3
4
5
6
7
8
<div>
  Joueur 1 :
  <label for="note_11"><img src="images/1.gif" alt="1"></label>
  <label for="note_12"><img src="images/2.gif" alt="2"></label>
  <label for="note_13"><img src="images/3.gif" alt="3"></label>
  <label for="note_14"><img src="images/4.gif" alt="4"></label>
  <label for="note_15"><img src="images/5.gif" alt="5"></label>
</div>

ou encore

Code:

1
2
3
4
5
6
7
<span>Joueur 2 :
  <label for="note_21"><img src="images/1.gif" alt="1"></label>
  <label for="note_22"><img src="images/2.gif" alt="2"></label>
  <label for="note_23"><img src="images/3.gif" alt="3"></label>
  <label for="note_24"><img src="images/4.gif" alt="4"></label>
  <label for="note_25"><img src="images/5.gif" alt="5"></label>
</span>

il faut bien sur que les radio button possèdent les bonnes ID

la fonction pourrait donc ressembler à cela

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
(function(){
  // recup des images
  var oParent, oImg = document.forms['vote'].getElementsByTagName('IMG');
  var i, nbImg = oImg.length;
  // initialisation des images
  for( i = 0; i < nbImg; i++){
    // recup le parent LABEL
    oParent = oImg[i].parentNode;
    // only si label for
    if( oParent.htmlFor){
      // style no select
      oImg[i].className = "img_no_select";
      // garde info DIV groupe
      oImg[i].groupe = oParent.parentNode;
      // recup le radio bouton associe because IE
      oImg[i].radio = document.getElementById( oParent.htmlFor);
      // fonction sur le onclick
      oImg[i].onclick = function(){
        // recup image du groupe
        oImg = this.groupe.getElementsByTagName('IMG');
        nbImg = oImg.length;
        // traite toutes les images
        for( i=0; i < nbImg; i++){
          // changement classe
          oImg[i].className = "img_no_select";
          // modification source
          oImg[i].src = oImg[i].src.replace( '-0', '');
        }
        // traite l'image cliquee
        this.className = "img_select";
        this.src = this.src.replace( '.gif', '-0.gif');
        // because IE
        this.radio.checked = true;
      };
    }
  }
})();

j'ai commenté les ajouts par rapport à la version initiale, je la pense optimisable mais bon...à suivre...

13/04/2011, 09h57
noreille79

Merci NoSmoking, pour les lignes de commentaires sur le code, ça m'a permis de mieux comprendre (étant novice en Javascript) et pour m'avoir aidé, ça marche parfaitement :ccool: