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.
