Alterner des images onclick

Version imprimable

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:

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

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

04/01/2012, 13h45
eerriicc66

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...:lol:
04/01/2012, 13h55
javatwister

sans doute juste une histoire de chemin absolu...

remplace cette ligne:

Code:

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

par

Code:

document.getElementById(picid).src=(picsrc.indexOf("croix.png")!=-1)?"vide.png":"croix.png";
04/01/2012, 15h02
eerriicc66

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
04/01/2012, 15h15
SpaceFrog

fais un alert du src tu comprendras ...
04/01/2012, 18h55
eerriicc66

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

Bonsoir,

Code:

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

05/01/2012, 09h30
eerriicc66

Pigé...

Ok je comprends que le script initial avait toujours un clic de retard :lol:
Je vais tout de même potasser ce "indexOf !=-1" qui ne me parle pas trop encore :D
Bonne journée et encore merci
Eric
05/01/2012, 09h44
SpaceFrog

ça revient à tester si la chaine du src contient "croix.png"
05/01/2012, 09h57
eerriicc66

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" :D
Je pense avoir bien compris
Merci
Eric