Changer d'image sur un Onclick [Résolu]

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

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.

SpaceFrog · 27/11/2011, 12h26

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

dukej · 27/11/2011, 14h25

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 :

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

27/11/2011, 17h31	#6
voyageurdumonde Membre habitué Inscription : décembre 2007 Messages : 392 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : décembre 2007 Messages : 392 Points : 118 Points : 118	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">
	00

27/11/2011, 22h41	#8
Luke spywoker Membre confirmé Etudiant informatique autodidacte Inscription : juin 2010 Messages : 452 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Etudiant informatique autodidacte Informations forums : Inscription : juin 2010 Messages : 452 Points : 278 Points : 278	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. __________________ Pour faire tes armes: Use du présent pour construire ton futur sinon use de ce que tu as appris auparavant. Et sois toujours bien armé avant de te lancer. Le hasard ne sourit qu'aux gens préparés... Blog: http://3dcyberspace.unblog.fr/ Site: Sanctuaire cybernétique
	00

28/11/2011, 08h40	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 201 Points : 45 201	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. __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	10

27/11/2011, 17h54	#7
voyageurdumonde Membre habitué Inscription : décembre 2007 Messages : 392 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : décembre 2007 Messages : 392 Points : 118 Points : 118	Le code de Spacefog fonctionne mais pas avec Internet explorer. Existe-il une methode pour remedier a cela? Merci
	00

28/11/2011, 15h52	#10
voyageurdumonde Membre habitué Inscription : décembre 2007 Messages : 392 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : décembre 2007 Messages : 392 Points : 118 Points : 118	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
	00

29/11/2011, 00h30	#12
voyageurdumonde Membre habitué Inscription : décembre 2007 Messages : 392 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : décembre 2007 Messages : 392 Points : 118 Points : 118	Je viens de changer le nom de l'iframe et maintenant tout est ok avec IE. Merci a tous de votre aide
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email