OnClick sur plusieurs images

**Deciprog** · 06/01/2009, 14h43

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 :

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

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

**E.Bzz** · 06/01/2009, 14h57

Bonjour,
utilise les id des images :

Code :

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

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 :

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

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

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

Code :

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

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

A+

**Deciprog** · 06/01/2009, 16h19

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 :

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

**E.Bzz** · 06/01/2009, 16h38

Arf !
C'est ma faute :

Envoyé par E.Bzz

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

Code :

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

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

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> ( ) et dans ce cas il faut modifier le 1° paramètre dans le onclick pour faire référence à l'image :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
onClick="change(this.getElementsByTagName('img')[0], 'grenouille', 'grenouille_initial');"
```

Est-il utile de préciser que je préfère la 1° méthode ?

A+

**Deciprog** · 06/01/2009, 17h29

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

???

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

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

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

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 !

**E.Bzz** · 06/01/2009, 17h38

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

???

Quelle erreur te sort Firefox ?

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

Code :

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

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

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

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+

**franculo_caoulene** · 06/01/2009, 17h44

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

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

**Fcc tds** · 01/02/2010, 01h26

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

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

Bravo !!!

**Deciprog** · 01/02/2010, 18h48

Très beau travail !

Merci franculo_caoulene

OnClick sur plusieurs images

JavaScript

Discussions similaires

Partager

Partager