Changement d'image avec un clic
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:
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:
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
