Changement d'image avec un clic

**Joshfluitsma** · 26/06/2012, 14h51

Bonjour,

J'ai un probèlme avec un script que j'ai écris et j'arrive pas à trouver la solution...
Je veux que quand on clique sur une image, la source de celle-ci soit remplacée par une autre. J'ai donc écris le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function changeimage1() {
if(document.getElementById('fleche1').src == "{{media url="wysiwyg/fleche-ferme1.png"}}" ) {
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
}
else {
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
}
}
</script>

Dans le body j'ai donc 4 images (des flèches) qui doivent être remplacées dès lorsqu'on clique dessus.

Voici la page entière:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<script>
function toggleDisplay0() {
  document.getElementById("toggleMe1").style.visibility = "visible";
  if(document.getElementById("toggleMe1").style.display == "" ) {
    document.getElementById("toggleMe1").style.display = "";
    document.getElementById("toggleMe2").style.display = "none";
    document.getElementById("toggleMe3").style.display = "none";
    document.getElementById("toggleMe4").style.display = "none";
  }
  else {
    document.getElementById("toggleMe1").style.display = "";
  }
}
function toggleDisplay1() {
  document.getElementById("toggleMe1").style.visibility = "visible";
  if(document.getElementById("toggleMe1").style.display == "none" ) {
    document.getElementById("toggleMe1").style.display = "";
    document.getElementById("toggleMe2").style.display = "none";
    document.getElementById("toggleMe3").style.display = "none";
    document.getElementById("toggleMe4").style.display = "none";
  }
  else {
    document.getElementById("toggleMe1").style.display = "";
  }
}
function toggleDisplay2() {
  document.getElementById("toggleMe2").style.visibility = "visible";
  if(document.getElementById("toggleMe2").style.display == "none" ) {
    document.getElementById("toggleMe2").style.display = "";
    document.getElementById("toggleMe1").style.display = "none";
    document.getElementById("toggleMe3").style.display = "none";
    document.getElementById("toggleMe4").style.display = "none";
  }
  else {
    document.getElementById("toggleMe2").style.display = "";
  }
}
function toggleDisplay3() {
  document.getElementById("toggleMe3").style.visibility = "visible";
  if(document.getElementById("toggleMe3").style.display == "none" ) {
    document.getElementById("toggleMe3").style.display = "";
    document.getElementById("toggleMe1").style.display = "none";
    document.getElementById("toggleMe2").style.display = "none";
    document.getElementById("toggleMe4").style.display = "none";
  }
  else {
    document.getElementById("toggleMe3").style.display = "";
  }
}
function toggleDisplay4() {
  document.getElementById("toggleMe4").style.visibility = "visible";
  if(document.getElementById("toggleMe4").style.display == "none" ) {
    document.getElementById("toggleMe4").style.display = "";
    document.getElementById("toggleMe1").style.display = "none";
    document.getElementById("toggleMe2").style.display = "none";
    document.getElementById("toggleMe3").style.display = "none";
  }
  else {
    document.getElementById("toggleMe4").style.display = "";
  }
}
function changeimage1() {
if(document.getElementById('fleche1').src == "{{media url="wysiwyg/fleche-ferme1.png"}}" ) {
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
}
else {
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
}
}
function changeimage2() {
if(document.getElementById('fleche2').src == "{{media url="wysiwyg/fleche-ferme1.png"}}" ) {
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
}
else {
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
}
}
function changeimage3() {
if(document.getElementById('fleche3').src == "{{media url="wysiwyg/fleche-ferme1.png"}}" ) {
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
}
else {
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
}
}
function changeimage4() {
if(document.getElementById("fleche4").src == "{{media url="wysiwyg/fleche-ferme1.png"}}" ) {
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
document.getElementById('fleche1').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche2').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
document.getElementById('fleche3').src = "{{media url="wysiwyg/fleche-ferme1.png"}}";
}
else {
document.getElementById("fleche4").src = "{{media url="wysiwyg/fleche-ouvert1.png"}}";
}
}
</script>
<div class="cms"> 
 
	<div class="cms cms-has-left-column clearfix"> 
		{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="67"}}
 
		<div class="cms-content">
			<div class="content">  
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-livres.jpg"}}); background-repeat: no-repeat;">
<div style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay1(); changeimage1()"><img id="fleche1" src="{{media url="wysiwyg/fleche-ferme1.png"}}" alt="" /></a></p>
</div>
</div>
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-ebooks.jpg"}}); background-repeat: no-repeat;">
<div style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay2(); changeimage2()"><img id="fleche2" src="{{media url="wysiwyg/fleche-ferme1.png"}}" alt="" /></a></p>
</div>
</div>
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-liseuse.jpg"}}); background-repeat: no-repeat;">
<div style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay3(); changeimage3()"><img id="fleche3" src="{{media url="wysiwyg/fleche-ferme1.png"}}" alt="" /></a></p>
</div>
</div>
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-papet.jpg"}}); background-repeat: no-repeat;">
<div style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay4(); changeimage4()"><img id="fleche4" src="{{media url="wysiwyg/fleche-ferme1.png"}}" alt="" /></a></p>
</div>
</div>
                        </div>
		</div>
	</div>
</div>

Il-y-a également un script qui affiche des divs en fonction de là où l'on clique, il est presque pareil mais il marche parfaitement bien.
Je l'ai utilisé ici:
http://www.decitre.fr/aide/passer-commande/

Pouvez vous voir où se situe l'erreur?

Merci d'avance,

Josh Fluitsma

**SpaceFrog** · 26/06/2012, 14h54

Code :

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

document.getElementById('fleche1').src = "wysiwyg/fleche-ouvert1.png";

**Joshfluitsma** · 26/06/2012, 15h06

Salut SpaceFrog,

J'ai remplacé les sources par les liens sans les {{media url=... mais il me faut avoir ça dans le lien pour que les images marchent donc ça du coup j'ai aucune image qui s'affiche..

**Bovino** · 26/06/2012, 15h42

La coloration syntaxique montre pourtant clairement que tu as un problème de quotes !
Si tu ouvres une chaine avec ", le " suivant trouvé fermera cette chaine.
Il faut soit alterner simples et doubles quotes, soit les échapper.

Code :

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

document.getElementById('fleche1').src = '{{media url="wysiwyg/fleche-ouvert1.png"}}';

**SpaceFrog** · 26/06/2012, 15h43

En effet !
Le bovidé aux yeux de Lynx a encore frappé :

Code :

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

document.getElementById('fleche1').src = '{{media url="wysiwyg/fleche-ouvert1.png"}}';

**Joshfluitsma** · 26/06/2012, 16h05

Ah je viens de comprendre l'histoire des quotes (je suis nouveau dans le développement web

) Sachant qu'il y en avait 4, il pensait que je les refermais au deuxième!

Par contre il-y-avait un autre problème et je n'ai pas compris pourquoi mais j'ai remplacé:

Code :

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

1
2
3
4
5
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-livres.jpg"}}); background-repeat: no-repeat;">
<div style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay1(); changeimage1()"><img id="fleche1" src="http://decitre-magento-pp.ielo.smile.fr/media/wysiwyg/fleche-ferme1.png" alt="" /></a></p>
</div>
</div>

par:

Code :

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

1
2
3
4
5
<div style="width: 25%; height: 161px; float: left; background-image: url({{media url="wysiwyg/Menu-livres.jpg"}}); background-repeat: no-repeat;">
<div onclick="changeimage1()" style="margin: 28px 0px 0px 0px;">
<p><a href="#" onclick="toggleDisplay1()"><img id="fleche1" src="http://decitre-magento-pp.ielo.smile.fr/media/wysiwyg/fleche-ferme1.png" alt="" /></a></p>
</div>
</div>

Et là ça marche... Je ne vois pas pourquoi il ne veut pas lancer les deux scripts...

Merci beaucoup en tout cas!!

**SpaceFrog** · 26/06/2012, 16h19

Code :

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

<a href="#" onclick="toggleDisplay1(); return false">

pour inhiber le href

Changement d'image avec un clic

JavaScript

Discussions similaires

Partager

Partager