Alterner des images onclick [Résolu]

eerriicc66 · 04/01/2012, 08h56

Bonjour tout le monde je vous souhaite une excellente année 2012.
Je viens de réaliser une petite application qui se voudrait pédagogique mais...
Le principe est simple : quand on clique dans une case on affiche une croix pleine si on clique à nouveau on revient à l'état initial.
Si on est pas trop exigeant on dira que cela fonctionne hors pour changer d'image on doit parfois cliquer plusieurs fois (notament quand on change de case) et cela ne me satisfait pas. Je ne m'explique pas ces "ratés de clic".
Voici l'application en ligne :
http://ericmaynadier.free.fr/coche/
Voici le 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="lesstyles.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
clic=0;
 
function coche(id)
{
if (clic==0) 
  {
  clic=1;
  document.getElementById(id).src="croix.png"; 
  }
else
  {
  clic=0;
  document.getElementById(id).src="vide.png"; 
  }
}
</script>
</head>
 
<body>
<table>
  <tr>
    <td><img id="case1" src="vide.png" onclick="coche(id)" alt="case"></td>
    <td><img id="case2" src="vide.png" onclick="coche(id)" alt="case"/></td>
    <td><img id="case3" src="vide.png" onclick="coche(id)" alt="case"/></td>
  </tr>
  <tr>
    <td><img id="case4" src="vide.png"  onclick="coche(id)" alt="case"/></td>
    <td><img id="case5" src="vide.png"  onclick="coche(id)" alt="case"/></td>
    <td><img id="case6" src="vide.png"  onclick="coche(id)" alt="case"/></td>
  </tr>
</table>
</body>
</html>

Merci pour vos réponses et bonne journée
Eric

SpaceFrog · 04/01/2012, 09h47

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="lesstyles.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
 
function coche(picid)
{
var picsrc=document.getElementById(picid).src;  
document.getElementById(picid).src=(picsrc=="croix.png")?"vide.png":"croix.png"; 
}
</script>
</head>
 
<body>
<table>
  <tr>
    <td><img id="case1" src="vide.png" onclick="coche(this.id)" alt="case"></td>
    <td><img id="case2" src="vide.png" onclick="coche(this.id)" alt="case"/></td>
    <td><img id="case3" src="vide.png" onclick="coche(this.id)" alt="case"/></td>
  </tr>
  <tr>
    <td><img id="case4" src="vide.png"  onclick="coche(this.id)" alt="case"/></td>
    <td><img id="case5" src="vide.png"  onclick="coche(this.id)" alt="case"/></td>
    <td><img id="case6" src="vide.png"  onclick="coche(this.id)" alt="case"/></td>
  </tr>
</table>
</body>
</html>

eerriicc66 · 04/01/2012, 13h45

Merci pour ta réponse Space Frog. Ton code est bien plus académique que le mien mais il ne permet pas de revenir à l'état initial en cas de nouveau clic (un bug dans la condition ternaire certainement...).J'obtenais le même résultat sans le else de ma condition et c'est vrai que le code se déroulait sans heurt. Je continue à chercher...

javatwister · 04/01/2012, 13h55

sans doute juste une histoire de chemin absolu...

remplace cette ligne:

Code :

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

document.getElementById(picid).src=(picsrc=="croix.png")?"vide.png":"croix.png";

par

Code :

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

document.getElementById(picid).src=(picsrc.indexOf("croix.png")!=-1)?"vide.png":"croix.png";

eerriicc66 · 04/01/2012, 15h02

Ok super çà fonctionne.
J'ai pas compris le pourquoi du comment et en qualité de pédagogue j'aimerais avoir le détail si tu veux bien.
Grand Merci
A très bientôt j'espère
Eric

SpaceFrog · 04/01/2012, 15h15

fais un alert du src tu comprendras ...

eerriicc66 · 04/01/2012, 18h55

Je ne sais pas où placer le alert pour avoir une explication mais faut-il comprendre que le script "attend" que l'image de remplacement soit chargée ?
Merci
Très cordialement
Eric

NoSmoking · 04/01/2012, 21h42

Bonsoir,

Code :

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

1
2
3
4
5
6
function coche(picid){
  var picsrc=document.getElementById(picid).src;  
  // affiche l'adresse de la source
  alert( picsrc);
  document.getElementById(picid).src=(picsrc.indexOf("croix.png")!=-1)?"vide.png":"croix.png";
}

eerriicc66 · 05/01/2012, 09h30

Ok je comprends que le script initial avait toujours un clic de retard

Je vais tout de même potasser ce "indexOf !=-1" qui ne me parle pas trop encore

Bonne journée et encore merci
Eric

SpaceFrog · 05/01/2012, 09h44

ça revient à tester si la chaine du src contient "croix.png"

eerriicc66 · 05/01/2012, 09h57

...et en l'occurence la chaine contient "vide.png" au premier clic. Et le indexOf change la valeur de la chaine en "croix.png" avant de réaliser la condition... ce que j'essayais de réaliser avec mon if coche = 0 alors coche=1 et vice versa mais qui était plutôt "foireux"

Je pense avoir bien compris
Merci
Eric

04/01/2012, 13h45	#3
eerriicc66 Invité de passage Eric Formateur Inscription : janvier 2012 Messages : 6 Détails du profil Informations personnelles : Nom : Eric Localisation : France, Pyrénées Orientales (Languedoc Roussillon) Informations professionnelles : Activité : Formateur Secteur : Enseignement Informations forums : Inscription : janvier 2012 Messages : 6 Points : 1 Points : 1	Retour état initial impossible Merci pour ta réponse Space Frog. Ton code est bien plus académique que le mien mais il ne permet pas de revenir à l'état initial en cas de nouveau clic (un bug dans la condition ternaire certainement...).J'obtenais le même résultat sans le else de ma condition et c'est vrai que le code se déroulait sans heurt. Je continue à chercher...
	00

04/01/2012, 13h55	#4
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	sans doute juste une histoire de chemin absolu... remplace cette ligne: Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById(picid).src=(picsrc=="croix.png")?"vide.png":"croix.png"; par Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById(picid).src=(picsrc.indexOf("croix.png")!=-1)?"vide.png":"croix.png";
	00

04/01/2012, 15h02	#5
eerriicc66 Invité de passage Eric Formateur Inscription : janvier 2012 Messages : 6 Détails du profil Informations personnelles : Nom : Eric Localisation : France, Pyrénées Orientales (Languedoc Roussillon) Informations professionnelles : Activité : Formateur Secteur : Enseignement Informations forums : Inscription : janvier 2012 Messages : 6 Points : 1 Points : 1	Yesssssssssss!!! Ok super çà fonctionne. J'ai pas compris le pourquoi du comment et en qualité de pédagogue j'aimerais avoir le détail si tu veux bien. Grand Merci A très bientôt j'espère Eric
	00

04/01/2012, 15h15	#6
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	fais un alert du src tu comprendras ... __________________ 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
	00

04/01/2012, 18h55	#7
eerriicc66 Invité de passage Eric Formateur Inscription : janvier 2012 Messages : 6 Détails du profil Informations personnelles : Nom : Eric Localisation : France, Pyrénées Orientales (Languedoc Roussillon) Informations professionnelles : Activité : Formateur Secteur : Enseignement Informations forums : Inscription : janvier 2012 Messages : 6 Points : 1 Points : 1	Pas sûr d'avoir compris Je ne sais pas où placer le alert pour avoir une explication mais faut-il comprendre que le script "attend" que l'image de remplacement soit chargée ? Merci Très cordialement Eric
	00

05/01/2012, 09h30	#9
eerriicc66 Invité de passage Eric Formateur Inscription : janvier 2012 Messages : 6 Détails du profil Informations personnelles : Nom : Eric Localisation : France, Pyrénées Orientales (Languedoc Roussillon) Informations professionnelles : Activité : Formateur Secteur : Enseignement Informations forums : Inscription : janvier 2012 Messages : 6 Points : 1 Points : 1	Pigé... Ok je comprends que le script initial avait toujours un clic de retard Je vais tout de même potasser ce "indexOf !=-1" qui ne me parle pas trop encore Bonne journée et encore merci Eric
	00

05/01/2012, 09h44	#10
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	ça revient à tester si la chaine du src contient "croix.png" __________________ 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
	00

05/01/2012, 09h57	#11
eerriicc66 Invité de passage Eric Formateur Inscription : janvier 2012 Messages : 6 Détails du profil Informations personnelles : Nom : Eric Localisation : France, Pyrénées Orientales (Languedoc Roussillon) Informations professionnelles : Activité : Formateur Secteur : Enseignement Informations forums : Inscription : janvier 2012 Messages : 6 Points : 1 Points : 1	Ok ...et en l'occurence la chaine contient "vide.png" au premier clic. Et le indexOf change la valeur de la chaine en "croix.png" avant de réaliser la condition... ce que j'essayais de réaliser avec mon if coche = 0 alors coche=1 et vice versa mais qui était plutôt "foireux" Je pense avoir bien compris Merci Eric
	00

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