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