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

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

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

Merci

**Luke spywoker** · 27/11/2011, 22h41

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.

**SpaceFrog** · 28/11/2011, 08h40

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.

**voyageurdumonde** · 28/11/2011, 15h52

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

**NoSmoking** · 28/11/2011, 19h19

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

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

**voyageurdumonde** · 29/11/2011, 00h30

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

Merci a tous de votre aide

Changer d'image sur un Onclick

JavaScript

Discussions similaires

Partager

Partager