Changer images lors d'un clic

**noreille79** · 11/04/2011, 15h23

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 :

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

**NoSmoking** · 11/04/2011, 22h32

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 :

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

**noreille79** · 12/04/2011, 10h17

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 :

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

**Bovino** · 12/04/2011, 10h26

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.

**Billy KiT** · 12/04/2011, 13h33

Salut,
@ NoSmoking, pour les ignorants comme moi, peux-tu expliquer cette syntaxe

Code :

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

1
2
3
4
5
<script type="text/javascript">
(function(){
...
})();
</script>

**Bovino** · 12/04/2011, 13h41

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

**noreille79** · 12/04/2011, 14h23

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 :

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

**NoSmoking** · 12/04/2011, 21h17

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

Code :

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

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

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

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

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

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 :

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

**noreille79** · 13/04/2011, 09h57

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

Changer images lors d'un clic

JavaScript

Discussions similaires

Partager

Partager