remplacer une image en cliquant

**armoirapizza** · 23/12/2012, 02h59

Bonjour,

je souhaite remplacer une image en cliquant dessus par son inverse et vice versa.
Pour cela, j'ai fait une fonction "changeImage()" déclencher par le Onclick mais ça ne fonctionne pas.
Ci dessous 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML>
  <head>
    <meta charset="utf-8" />
    <title>Second devoir</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/include.js">
	var Tableau1= new Array(10);
	function changeImage(){
		if(document.getElementById('case3').value=="mouton2.png"){
			img.src=="mouton22.png";
		}else if(docuemtn.getElementById('case3').value=="mouton22.png"){
			img.src=="mouton2.png";
		}
	}		
	function ResetForm(){
	document.getElementById("userForm").reset();
	}
 
	</script>
    <style type="text/css">
      table {border-collapse: collapse;}
      td, th {border: 2pt solid black;}
      td, th {width: 6em;}
      img {width: 6em;}
    </style>
 
  </head>
   <body>
	  <header>
	    <h1>Devoir NFA016</h1>
	  </header>
 
	  <article>
	    <header>
	      <h2>Jeu des moutons</h2>
		</header>
		<form id="userForm">
			<table id="t">
				<tr>
					<td></td>
					<td><img src="mouton2.png" alt=""></td>
					<td><A HREF="JavaScript:void(0)" 
						Onclick='changeImage()'>
							<IMG SRC="mouton2.png" border=0 id="case3">
						</A></td>
					<td><A HREF="JavaScript:void(0)" 
						OnMouseOver='document.images["case4"].src="mouton22.png"'
						OnMouseOut='document.images["case4"].src="mouton2.png"' 
						>
							<IMG SRC="mouton2.png" border=0 id="case4">
						</A></td>
					<td></td>
					<td></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td></td>		
				</tr>
			</table>
			</form>
			<button onclick="alert('Nouvelle Partie')">Recommencer</button>
 
		</body>
	</html>

**sekaijin** · 23/12/2012, 10h48

Envoyé par armoirapizza

Bonjour,

je souhaite remplacer une image en cliquant dessus par son inverse et vice versa.
Pour cela, j'ai fait une fonction "changeImage()" déclencher par le Onclick mais ça ne fonctionne pas.
Ci dessous 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML>
  <head>
    <meta charset="utf-8" />
    <title>Second devoir</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/include.js">
	var Tableau1= new Array(10);
	function changeImage(){
		if(document.getElementById('case3').value=="mouton2.png"){
			img.src=="mouton22.png";
		}else if(docuemtn.getElementById('case3').value=="mouton22.png"){
			img.src=="mouton2.png";
		}
	}		
	function ResetForm(){
	document.getElementById("userForm").reset();
	}
 
	</script>
    <style type="text/css">
      table {border-collapse: collapse;}
      td, th {border: 2pt solid black;}
      td, th {width: 6em;}
      img {width: 6em;}
    </style>
 
  </head>
   <body>
	  <header>
	    <h1>Devoir NFA016</h1>
	  </header>
 
	  <article>
	    <header>
	      <h2>Jeu des moutons</h2>
		</header>
		<form id="userForm">
			<table id="t">
				<tr>
					<td></td>
					<td><img src="mouton2.png" alt=""></td>
					<td><A HREF="JavaScript:void(0)" 
						Onclick='changeImage()'>
							<IMG SRC="mouton2.png" border=0 id="case3">
						</A></td>
					<td><A HREF="JavaScript:void(0)" 
						OnMouseOver='document.images["case4"].src="mouton22.png"'
						OnMouseOut='document.images["case4"].src="mouton2.png"' 
						>
							<IMG SRC="mouton2.png" border=0 id="case4">
						</A></td>
					<td></td>
					<td></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td><img src="mouton1.png" alt=""/></td>
					<td></td>		
				</tr>
			</table>
			</form>
			<button onclick="alert('Nouvelle Partie')">Recommencer</button>
 
		</body>
	</html>

on ne met pas de code dans un script si on met l'attribut src

Code html :

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

1
2
3
4
   <script type="text/javascript" src="js/include.js">
	var Tableau1= new Array(10);
        ...
   </script>

Code html :

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

1
2
3
4
5
   <script type="text/javascript" src="js/include.js" ></script>
   <script type="text/javascript">
        var Tableau1= new Array(10);
        ...             
   </script>

Dans ton code tu utilise la variable img qui sort de nulle part
et tu dis que tu veux changer l'image en cliquant dessus mais tu mets ton code sur lu lien qui est à côté de l'image

Code :

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

1
2
3
4
5
6
7
function changeImage(img){
  if(img.src=="mouton2.png"){
    img.src=="mouton22.png";
  }else {
    img.src=="mouton2.png";
  }
}

Code html :

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

<img src="mouton2.png" alt="" onclick="changeImage(this);">

A+JYT

**armoirapizza** · 23/12/2012, 13h40

Bonjour,
ça ne fonctionne pas.. J'ai placé et déplacé un message "alert" dans la fonction, il est bien lu mais lorsque je clique sur l'image, une image "cassée" apparait.

Question: "document.images... : le mot "images" et un mot réservé?

Merci

**sekaijin** · 23/12/2012, 14h35

je n'ai pas vu que tu faisais des tests et pas des affectation donc en copiant ton code j'ai copié les erreurs

Code :

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

1
2
3
4
5
6
7
function changeImage(img){
  if(img.src=="mouton2.png"){
    img.src=="mouton22.png"; //Ici c'est un test pas une affecation
  }else {
    img.src=="mouton2.png"; //Ici c'est un test pas une affecation
  }
}

code corrigé

Code :

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

1
2
3
4
5
6
7
function changeImage(img){
  if(img.src=="mouton2.png"){
    img.src="mouton22.png"; //un seul = pour une affecation
  }else {
    img.src="mouton2.png"; //un seul = pour une affecation
  }
}

NON images n'est pas un mot réservé c'est un attribut de l'objet document
les mots réservés sont

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
try
typeof
var
void
volatile
while
with

les objejts document, window, navigator sont définis par le w3c ce sont des objet pas des mots clefs du langage.

A+JYT

**sdamart** · 23/12/2012, 17h16

Salut,
Quelques points :
1- si tu utilise jQuery ne te prive pas de sa syntaxe

Code :

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

document.getElementByID("case3")

remplace par

Code :

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

$("#case3")

2 - Evite de te servir des liens comme alternative au évenements

Code :

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

<a href='javacript:void(0)' ...><img src...></a>

jQuery permet de prototyper un élément du DOM et lui affecter des évènements

Code :

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

1
2
3
4
5
6
7
8
$(function(){
$('img').mouseover(function(){
if($(this).attr('src')=='mouton2.png')
$(this).attr('src','mouton1.png');
else
$(this).attr('src','mouton2.png')
});
})

3- Evite les fautes d'orthographe dans le code
documetn => document

Sinon l'idée générale est bonne
Bonne Chance

**armoirapizza** · 23/12/2012, 19h53

bonjour,

merci pour la réponse.
Je tâcherai de faire attention à l'orthographe, ça peut aider c'est sûr!

Ci dessous un petite portion de code. Je ois bien que c'est n'importe quoi mais voila l'idée :
J'ai déclaré et instancié un tableau en javascript, je voudrai grâce à une fonction getImage() donner une image correspondant à la valeur à l'indice i.
(si i=0 : pas d'image, si i=1 : telle image, si i=2 : telle autre)
code js:

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
var statusOfMoutons = new Array();
statusOfMoutons = [0,1,1,1,0,0,2,2,2,0];
function getImage()
	{
	var img;
 
	for (var i=0; i<statusOfMoutons.length; i++){
 
		if(statusOfMoutons[i]==0)
			img=document.getElementById("");
 
		else if(statusOfMoutons[i]==1)
			img=document.getElementById(src = "C:\Users\packard bell\Documents\workspace\jeux2moutons\mouton1.png");
 
		else if (stautsOfMoutons[i]==2)
			img==document.getElementById(src = "C:\Users\packard bell\Documents\workspace\jeux2moutons\mouton2.png");
 
	}

code html:

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
<table id="moutonTable">
		<tr>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>
			<td><img src="getImage()"; alt=""></td>		
		</tr>
	</table>

**Bovino** · 24/12/2012, 10h48

Code :

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

1
2
var statusOfMoutons = new Array();
statusOfMoutons = [0,1,1,1,0,0,2,2,2,0];

Pourquoi cette volonté farouche de toujours vouloir compliquer les choses...

Code :

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

var statusOfMoutons = [0,1,1,1,0,0,2,2,2,0];

Est plus simple et tout aussi correct.

Pour rappel, il est recommandé de passer par des littéraux pour construire des objets que par des constructeurs :

Code :

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

1
2
3
4
5
var chaine = '';  // Crée une String
var nombre = 0;  // Crée un Number
var booleen = true; // Crée un Boolean
var tableau = [];  // Crée un Array
var objet = {};  // Crée un Object

Code :

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

img=document.getElementById(src = "C:\Users\packard bell\Documents\workspace\jeux2moutons\mouton1.png");

Mais c'est n'importe quoi ça... Tu gagnerais à apprendre les bases de JavaScript avant de l'utiliser... ou d'essayer de comprendre ce que signifie le nom de la fonction ! Quant à la valeur que tu donnes à src, n'en parlons pas...

Code html :

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

<img src="getImage()"; alt="">

Là encore, ça n'a aucun sens ! Le src d'une image ne correspond pas à l'appel d'un script...

Enfin, les solutions t'ont déjà été données, pourquoi tu ne suis pas les pistes données ?

**armoirapizza** · 24/12/2012, 17h22

Bonjour Bovino,

pour la déclaration de l'array, c'est juste pour moi. Je vois bien que ta solution est plus concise.

Pour les src dans le document.getelement... je sais que c'est n 'importe quoi,
le truc c'est que je ne capte pas comment :
- lier ma fonction afficheImage() avec le html et dans cette fonction, comment lier 3 images (au choix).
cette fonction n'a pas vocation à être appelée par un onclick mais par un onload sans pour autant "géner" la fonction drawTable() que j'ai déjà et qui se charge au lancement du script.

Je cherche avec mes cours ou sur le net mais je n'arrive pas à conceptualiser le DOM...
En tout cas merci de ta réponse.

remplacer une image en cliquant

JavaScript

Discussions similaires

Partager

Partager