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.

Changer images lors d'un clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager