Changer d'image sur un Onclick

Version imprimable

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:

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

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:

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>

27/11/2011, 11h29
dukej

Citation:

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.
27/11/2011, 12h26
SpaceFrog

Citation:

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...
27/11/2011, 14h25
dukej
Citation:

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:

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
27/11/2011, 17h31
voyageurdumonde

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

Code:

<form method="post" action="panier.php" target="panier" name="Form" id="Form">
27/11/2011, 17h54
voyageurdumonde

Le code de Spacefog fonctionne mais pas avec Internet explorer. Existe-il une methode pour remedier a cela?

Merci
27/11/2011, 22h41
Luke spywoker

Pour vous départager,
Je pense qu'il est une bonne pratiqe d'appeler une variable avec un mot réserver mas pas sous sa forma brute mais en l'incluant dans le nom de la variable avec un autre mot ce qui permet d'identifier le type de la variable grace a son nom, ce qui est pratique tant que la variable n'est pas nommé exactement comme le mot réserver je ne vois pas le problème au contraire.
28/11/2011, 08h40
SpaceFrog

Quelle version d'IE ??? j'ai testé sous IE et FFX sans souci ...

Pour ce qui est du nommage des variable je mets toujours myId ou ObjId
Ce qui reste très clair et ne pose aucun souci ni de confusions ni de conflits.
28/11/2011, 15h52
voyageurdumonde

Sur les versions de IE 8 ou 9

Voici un lien vers ma page:
http://www.bonplanvoyage.com/index.p...ionbp=quefaire

Si vous cliquez sur la valise de la liste, l'image change avec FF mais pas avec IE

Merci de votre aide

Bonjour,
la GROSSE maladresse est de ne pas faire preuve d'imagination quant au choix des noms pour les variables, les fonctions et le reste.

Je rejoint en ce sens SpaceFrog en étendant cela aux mots déjà utilisés surtout qu'il faut compter avec IE.

Pour IE une "différence", plutôt confusion, de taille est faite entre une fonction appelée dans du javascript et la même fonction appelée sur les événements mis dans les balises.

Un petit exemple pour illustrer le propos, à tester sur IE principalement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[...]</title> <meta name="Author" content="NoSmoking"> <script type="text/javascript"> function panier( param){ alert( param +'\n' +arguments.callee); } </script> </head> <body> <iframe name="panier"></iframe> <button onclick="panier('depuis BALISE !');">PANIER</button> <script type="text/javascript"> panier('depuis SCRIPT !'); </script> </body> </html>
Donc pour répondre à voyageurdumonde, mets des noms significatifs et évites ce genre de doublons de libellé.

29/11/2011, 00h30
voyageurdumonde

Je viens de changer le nom de l'iframe et maintenant tout est ok avec IE.

Merci a tous de votre aide