OnClick sur plusieurs images

Version imprimable

Bonjour,

Je souhaiterais que l'image sur laquelle je clique (onClick) se change en une autre.
J'ai plusieurs images qui doivent avoir cette fonctionnalité.

Il s'agit en quelque sorte de checkbox par image.

Actuellement j'ai ces liens
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function change(anim){ if( == 0){ window.document.image.src='images/' + anim + '.png'; } if( i == 1){ window.document.image.src='images/grenouille.png'; i = 0;} i++ window.document.image.src='images/' + anim + '.png'; } <a href="javascript:;" onClick="change('escargot');"><img src="images/escargot.png" name="escargot"></a> <a href="javascript:;" onClick="change('grenouille');"><img src="images/grenouille.png" name="grenouille"></a>
Merci d'avance ;)

Bonjour,
utilise les id des images :
Code:

1 2 3 4 5 6 7 8 9 10 function change(obj, anim, img_defaut){ if( == 0){ obj.src='images/' + anim + '.png'; } if( i == 1){ obj.src='images/'+img_defaut+'.png'; i = 0;} i++ obj.src='images/' + anim + '.png'; }
Il te suffit de personnaliser les appels pour chaque image par défaut :

Code:

<a href="javascript:;" onClick="change(this, 'grenouille', 'grenouille_initial');"><img src="images/grenouille.png" name="grenouille"></a>

(d'ailleurs pourquoi un <a href> ? =>

Code:

<img src="images/grenouille.png" name="grenouille" style="cursor:pointer;" onClick="change(this, 'grenouille', 'grenouille_initial');">

A+

Merci E.Bzz pour ton post.

De passer en paramètres l'id et les deux noms d'images est une exellente idée.
Mais j'ai un problème au niveau de la fonction car elle me renvoie toujours la même image.

Je te renvois le code "complet" de la page.

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
 
 
<em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script langage="JavaScript1.2">
	var i = 0;
	function changer(obj, img, img_cocher){
		if( i == 2){
			i = 0;
		}
		if( i == 0){
			obj.src='images/' + img + '.png';
		}
		if( i == 1){
			obj.src='images/'+ img_cocher +'.png';
		}
		i++;
	}
</script>
 
</head>
 
<body>
 
	<img src="images/grenouille.png" name="grenouille" style="cursor:pointer;" onClick="changer(this, 'grenouille', 'grenouillecocher');">
    	<img src="images/oiseau.png" name="oiseau" style="cursor:pointer;" onClick="changer(this, 'oiseau', 'oiseaucocher');">
 
    	<a href="javascript:;" onClick="changer(this,'grenouille','grenouillecocher');"><img src="images/grenouille.png" name="grenouille"></a>
  	<a href="javascript:;" onClick="changer(this,'oiseau','oiseaucocher');"><img src="images/oiseau.png" name="oiseau"></a>
 
</body>
</html>

Peux tu me guider...

Merci d'avance !

06/01/2009, 16h38
E.Bzz
Arf !
C'est ma faute :

Citation:

Envoyé par E.Bzz

(d'ailleurs pourquoi un <a href> ? =>

Code:

<img src="images/grenouille.png" name="grenouille" style="cursor:pointer;" onClick="change(this, 'grenouille', 'grenouille_initial');">

A+

Le "this" est basée sur la solution ci-dessus : ici on clique bien sur l'image. Le this représente bien l'image.
Alors que dans ton cas (et mon 1° code, faux, donc), le clique se fait sur le <a href>. Le this ne représente donc pas l'img mais le <A> :aie:

Donc 2 solutions :
- soit tu enlèves la <a href> et tu redéfinis ton image comme ci-dessus (et le code actuel fonctionnera).
- soit tu tiens au <a href> ( :nono: ) et dans ce cas il faut modifier le 1° paramètre dans le onclick pour faire référence à l'image :
  
  Code:
  
  onClick="change(this.getElementsByTagName('img')[0], 'grenouille', 'grenouille_initial');"
Est-il utile de préciser que je préfère la 1° méthode ? :mrgreen:

A+

Encore merci E.Buzz pour ton aide.

il persiste 2 problèmes :

1 : Que le code soit avec ou sans les "<a href>" (je préfère aussi sans) fonctionne sous Internet Explorer. Mais pas sous FireFox ??? 8O ???

2 : Il y a aussi un petit problème sur la gestion des clicks, c'est un problème sur la fonction ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script langage="JavaScript1.2"> var i = 0; function changer(obj, img, img_cocher){ if( i == 2){ i = 0; } if( i == 0){ obj.src='images/' + img + '.png'; } if( i == 1){ obj.src='images/'+ img_cocher +'.png'; } i++; } </script>
et pour les images :
Code:

1 2 3 <img src="images/grenouille.png" name="grenouille" style="cursor:pointer;" onClick="changer(this, 'grenouille', 'grenouillecocher');"> <img src="images/oiseau.png" name="oiseau" style="cursor:pointer;" onClick="changer(this, 'oiseau', 'oiseaucocher');">
Peux tu encore me guider...

Merci d'avance ! ;)

Citation:

Envoyé par dark snake sw

1 : Que le code soit avec ou sans les "<a href>" (je préfère aussi sans) fonctionne sous Internet Explorer. Mais pas sous FireFox ??? 8O ???

Quelle erreur te sort Firefox ?

Sinon (bien qu'a priori pas d'influence) :

Code:

<script type="text/javascript">

"langage" c'est l'orthographe française ;)
Tu gères 3 états (0, 1 et 2) mais n'en utilise que 2 => utilise un booléen :
Code:

1 2 3 4 5 6 7 8 9 var blnEtat = false; function changer(obj, img, img_cocher){ if( !blnEtat ) obj.src='images/' + img + '.png'; else obj.src='images/'+ img_cocher +'.png'; blnEtat = !blnEtat; } </script>
A+

Salut,

Ce code résout ton problème sans pour étant répondre spécifiquement à ton problème. J'essaie de promouvoir le javascript non-intrusif et la délégation d'évènement.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>modification d'une image au clique</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <img src="img/1.gif" alt="test" />
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
                if (elm.length === undefined) {
                    elm.addEventListener(evt, function(e) {
                        fn(e);
                    }, false);
                } else {
                    for (var i = 0, imax = elm.length; i < imax; i++) {
                        elm[i].addEventListener(evt, function(e) {
                            fn(e);
                        }, false);
                    }
                }
            } else if (document.attachEvent) {
               if (elm.length === undefined) {
                  elm.attachEvent("on" + evt, fn);
               } else {
                 for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].attachEvent("on" + evt, fn);
                 }
               }
            }
         }
      },
      changeImage: function(elm, i1, i2) {
         (elm.src.indexOf(i1)>-1) ? elm.src=i2 : elm.src=i1;
      }
   }
   Utils.Evenement.ajouter(document, "click", function(e){
      var elm = e.target || e.srcElement;
      if (elm.src) {Utils.changeImage(elm, "img/1.gif", "img/2.gif");}
   });
   </script>
</body>
</html>

Plutôt que de tester une variable i, teste directement l'attribut src de l'objet.

Je m'ennuyais et passais par là...

Citation:

Envoyé par franculo_caoulene

Salut,

Ce code résout ton problème sans pour étant répondre spécifiquement à ton problème. J'essaie de promouvoir le javascript non-intrusif et la délégation d'évènement.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>modification d'une image au clique</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <img src="img/1.gif" alt="test" />
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
                if (elm.length === undefined) {
                    elm.addEventListener(evt, function(e) {
                        fn(e);
                    }, false);
                } else {
                    for (var i = 0, imax = elm.length; i < imax; i++) {
                        elm[i].addEventListener(evt, function(e) {
                            fn(e);
                        }, false);
                    }
                }
            } else if (document.attachEvent) {
               if (elm.length === undefined) {
                  elm.attachEvent("on" + evt, fn);
               } else {
                 for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].attachEvent("on" + evt, fn);
                 }
               }
            }
         }
      },
      changeImage: function(elm, i1, i2) {
         (elm.src.indexOf(i1)>-1) ? elm.src=i2 : elm.src=i1;
      }
   }
   Utils.Evenement.ajouter(document, "click", function(e){
      var elm = e.target || e.srcElement;
      if (elm.src) {Utils.changeImage(elm, "img/1.gif", "img/2.gif");}
   });
   </script>
</body>
</html>

Plutôt que de tester une variable i, teste directement l'attribut src de l'objet.

Je m'ennuyais et passais par là...

:ccool: Bravo !!!

01/02/2010, 18h48
Deciprog

Très beau travail !

Merci franculo_caoulene :ccool: