Diaporama complexe en Javascript
Bonjour bonjour,
Je débute en javascript, et malgrès ma recherche sur le forum, je n'ai pas réussit a trouver une solution à mon problème.
Voila je vous explique :
J'ai une page web séparée trois en partie, une à gauche, une au milieu et une à droite.
au milieu, il y a 5 petites images les unes au dessus des autres.
quand on clique sur une image, dans la partie gauche, on la voit apparaitre en grand, et dans la partie droite, il y a du texte qui change en fonction de l'image, mais aussi trois autres petites images sous ce texte qui change. Et quand on clique sur ces nouvelles images, elles s'ouvrent en taille réelle dans une fenètre pop-up.
Tout d'abord, pour les images du milieu, j'ai mis un onClick dessus, pour qu'elle change l'image de gauche. Ce qui fonctionne très bien.
Voici un petit exemple du code :
Code:
<p><img name="photo1" class="photo1" onClick="divgaucheimggrosse.src='images/normales/image26.jpg'" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>
Ensuite, pour les textes et les images qui changent, je les ai tous mis dans des div différents, en pensant les cacher et les afficher en fonction de l'image cliquée, grâce à une aide que j'ai trouvé précédemment sur ce forum. hors, sur les images du centre il y a donc deux fonctions onClick... Je ne sais pas trop comment faire pour concaténer.
Voici un extrait de ma tentative infructueuse pour résoudre ce problème :
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
| <script language="JavaScript" type="text/javascript">
function diaporama(photo){
switch (photo){
case 'photo1':
div1.style.display= "block";
div2.style.display="none";
div3.style.display="none";
div4.style.display="none";
div5.style.display="none";
break;
case 'photo2':
div2.style.display= "block";
div1.style.display="none";
div3.style.display="none";
div4.style.display="none";
div5.style.display="none";
break;
case 'photo3':
('div3').style.display= "block";
('div1').style.display="none";
('div2').style.display="none";
('div4').style.display="none";
('div5').style.display="none";
break;
case 'photo4':
('div4').style.display= "block";
('div1').style.display="none";
('div2').style.display="none";
('div3').style.display="none";
('div5').style.display="none";
break;
case 'photo5':
('div5').style.display= "block";
('div1').style.display="none";
('div2').style.display="none";
('div3').style.display="none";
('div4').style.display="none";
break;
}
}
</script> |
Et le code HTML, sur juste deux photos à chaque fois car c'est toujours la même chose :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="corps_droit">
<p><img name="photo1" class="photo1" onClick="divgaucheimggrosse.src='images/normales/image26.jpg'" onClick="diaporama()" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>
<p><img name="photo2" class="photo2" onClick="divgaucheimggrosse.src='images/normales/image27.jpg'" onClick="diaporama()" onmouseover="this.style.cursor='pointer'" src="images/reduites/image27.jpg" alt="" /></p>
<div name="div1" style="display:block">
<p class="textdiapo">La chambre <em>AGAPANTE</em> Plouf plouf.</p>
<p><img class="photo6" onClick="window.open('images/normales/image31.jpg','','height=350,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image31.jpg" alt=""/></p>
<p><img class="photo7" onClick="window.open('images/normales/image32.jpg','bureau ancien','height=310,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image32.jpg" alt="Bureau ancien."/></p>
<p><img class="photo8" onClick="window.open('images/normales/image33.jpg','','height=310,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image33.jpg" alt="."/></p>
</div>
<div name="div2" style="display:none">
<p class="textdiapo">pouet pouet.</p>
<p><img class="photo6" onClick="window.open('images/normales/image34.jpg','','height=350,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image34.jpg" alt=""/></p>
<p><img class="photo7" onClick="window.open('images/normales/image35.jpg','','height=310,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image35.jpg" alt="Bureau ancien."/></p>
<p><img class="photo8" onClick="window.open('images/normales/image36.jpg','','height=310,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image36.jpg" alt=""/></p>
</div> |
Voila, je crois que j'ai tout dis, j'espère avoir été assez claire dans la description.
