Alterner des images onclick

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

Alterner des images onclick

JavaScript

Discussions similaires

Partager

Partager