Changer d'image sur un Onclick

**voyageurdumonde** · 27/11/2011, 05h59

Bonjour,

lorsque je clique sur l'image la premiere fois, l'image change, mais si je reclique dessus elle ne revient pas pour l'image de depart.

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
<script type="text/javascript">
 
 
function panier(Id)
{ 
 var IMG;
    IMG = document.getElementById(Id);
 if (IMG.src=="memoriserplus.gif")
     {
	IMG.src="memorisermoins.png";
      }
 else 
     {
	IMG.src="memoriserplus.gif";
      }
}
</script>
 
<input type="image" src="memoriserplus.gif" ALT="" TITLE="" name="panier52" id="panier52" onclick="panier(this.id)">

Merci de votre aide

**SpaceFrog** · 27/11/2011, 09h13

Hormis le fait qu'il est très maladroit en js d'appeler des variables avec des mots réservés du langage IMG et id

Il faut savoir qu'un bouton de type image agit comme un bouton submit, si il est contenu dans un formulaire il va soumettre le form et donc recharger 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
 
<script type="text/javascript">
function panier(ImgId)
{ 
 var myimg= document.getElementById(ImgId);
 if (myimg.style.backgroundImage.indexOf('memoriserplus.gif')>0)
     {
    myimg.style.backgroundImage='url("memorisermoins.png")'; 
	alert (myimg.style.backgroundImage);
      }
 else 
     {
	myimg.style.backgroundImage='url("memoriserplus.gif")';
		alert (myimg.style.backgroundImage);
      }
}
</script>
 
</head>
 
<body>
<input type="button" style="background-image: url('memoriserplus.gif')" ALT="" TITLE="" name="panier52" id="panier52" onclick="panier(this.id)">
 
</body>

**dukej** · 27/11/2011, 11h29

Envoyé par SpaceFrog

Hormis le fait qu'il est très maladroit en js d'appeler des variables avec des mots réservés du langage IMG et id

Encore une fois de plus tu dis n'importe quoi, ce ne sont pas des mots réservés du langage. Les mots réservés du langage sont : for, in, if, else, while, do, function, undefined, return, false, true, etc...
Mais img et id ont le droit d'être utilisées comme variables, surtout si elle sont locales à la fonction.

**SpaceFrog** · 27/11/2011, 12h26

Encore une fois de plus tu dis n'importe quoi,

Merci !

Ok pour ta liste de mots "réservés" ...
Mais cela n'empeche que utiliser des variables telles que id et img peuvent selon leur portée préter à confusion.
Je suis tombé sur un cas ou id m'a mis dedans pour trois heures (sous IE)

Maintenant chacun code comme il veut...

**dukej** · 27/11/2011, 14h25

Envoyé par SpaceFrog

Merci !

Ok pour ta liste de mots "réservés" ...
Mais cela n'empeche que utiliser des variables telles que id et img peuvent selon leur portée préter à confusion.
Je suis tombé sur un cas ou id m'a mis dedans pour trois heures (sous IE)

Maintenant chacun code comme il veut...

id n'est qu'une propriété d'éléments du dom (et encore) et ça n'empeche pas de l'utiliser comme variable et c'est largement plus clair :

Code :

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

1
2
3
 
var id = chien.id,
name = chien.name;

ici name et id prennent tout leur sens comme variables.
Encore une fois, si id t'a mis dedans durant 3 heures c'est que tu sais mal débugger du code sous IE

**voyageurdumonde** · 27/11/2011, 17h31

En fait la page ne se recharger pas car je fais le form dans une iframe qui s'appelle panier

Code :

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

<form  method="post" action="panier.php" target="panier" name="Form" id="Form">

Changer d'image sur un Onclick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager