Diaporama complexe en Javascript

**Crocomadaire** · 15/01/2008, 00h00

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

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
		<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 :

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
		<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.

**jojosbiz** · 15/01/2008, 09h27

Salut,

Tu ne peux pas mettre plusieurs attributs 'onclick' sur une m�me balise.

Pour ex�cuter plusieurs fonctions sur un 'onclick', il suffit de les regrouper dans une seule et unique fonction qui les ex�cutera toutes.

Donc au lieu d'�crire

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<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>

On �crira plut�t

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
function exec(){
divgaucheimggrosse.src = 'images/normales/image26.jpg';
diaporama();
}
</script>
<p><img name="photo1" class="photo1" onclick="exec();" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>

Autre suggestion / recommandation, les 'onclick', 'onmouseover' etc ... s'�crivent tous en minuscules (comme toutes les balises HTML d'ailleurs).

Derni�re chose, plut�t que d'utiliser l'attribut 'name' pour d�signer et retrouver tes blocks (balises 'div'), utilise plut�t l'attribut 'id' et la fonction 'getElementById' pour le d�signer.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="div1" style="display:block">

en lieu et place de

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<div name="div1" style="display:block">

ensuite

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('div1').style.display = "block";

en lieu et place de

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

div1.style.display = "block";

Bonne chance.

**Crocomadaire** · 15/01/2008, 13h33

Bonjour, et merci de ton aide.
J'ai fait tout ce que tu m'as dis, je vais mettre l'int�gralit� de mon code ici :

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
		<script language="JavaScript" type="text/javascript">
			function diaporama (photo){
				switch (photo){
					case 'photo1':
						divgaucheimggrosse.src = 'images/normales/image26.jpg';
						document.getElementById('div1').style.display = "block";
						document.getElementById('div2').style.display = "none";
						document.getElementById('div3').style.display = "none";
						document.getElementById('div4').style.display = "none";
						document.getElementById('div5').style.display = "none";
						break;
			        case 'photo2':
						divgaucheimggrosse.src = 'images/normales/image27.jpg';
						document.getElementById('div2').style.display = "block";
						document.getElementById('div1').style.display = "none";
						document.getElementById('div3').style.display = "none";
						document.getElementById('div4').style.display = "none";
						document.getElementById('div5').style.display = "none";
						break;
					case 'photo3':
						divgaucheimggrosse.src = 'images/normales/image28.jpg';
						document.getElementById('div3').style.display = "block";
						document.getElementById('div1').style.display = "none";
						document.getElementById('div2').style.display = "none";
						document.getElementById('div4').style.display = "none";
						document.getElementById('div5').style.display = "none";
						break;
					case 'photo4':
						divgaucheimggrosse.src = 'images/normales/image29.jpg';
						document.getElementById('div4').style.display = "block";
						document.getElementById('div1').style.display = "none";
						document.getElementById('div2').style.display = "none";
						document.getElementById('div3').style.display = "none";
						document.getElementById('div5').style.display = "none";
						break;
					case 'photo5':
						divgaucheimggrosse.src = 'images/normales/image30.jpg';
						document.getElementById('div5').style.display = "block";
						document.getElementById('div1').style.display = "none";
						document.getElementById('div2').style.display = "none";
						document.getElementById('div3').style.display = "none";
						document.getElementById('div4').style.display = "none";
						break;
 
			       }
			}
		</script>

Et pour le xhtml :

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
		<div id="corps_gauche">
			<p><img class="divgaucheimggrosse" name="divgaucheimggrosse" src="images/normales/image26.jpg" alt="Agrandissement des images." /></p>
		</div>
 
		<div id="corps_droit">
			<p><img name="photo1" class="photo1" onclick="diaporama(photo1)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>
			<p><img name="photo2" class="photo2" onclick="diaporama(photo2)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image27.jpg" alt="" /></p>
			<p><img name="photo3" class="photo3" onclick="diaporama(photo3)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image28.jpg" alt="" /></p>
			<p><img name="photo4" class="photo4" onclick="diaporama(photo4)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image29.jpg" alt="" /></p>
			<p><img name="photo5" class="photo5" onclick="diaporama(photo5)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image30.jpg" alt="" /></p>
			<div id="div1" style="display:block">
				<p class="textdiapo">Blabla, bla.</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','','height=310,width=500') "onmouseover="this.style.cursor='pointer'" src="images/reduites/image32.jpg" alt=""/></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 id="div2" style="display:none">
				<p class="textdiapo">Trucmuche</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=""/></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>

je n'ai pas mis les trois derniers div car ils sont sur le m�me mod�le.
Bon, avec ce code, il ne se passe rien. Juste mon div1 est affich�, et les 3 images ouvrent des pop-up. mais sinon, la fonction ne se lance pas du tout, le site reste statique.
J'ai beau chercher une erreur de frappe, mais je n'en trouve vraiment pas. Il me manquerais un �l�ment dans le javascript ? J'avoue n'avoir jamais bien r�ussi � utiliser les fonctions.

**jojosbiz** · 15/01/2008, 14h06

Fais bien attention � passer tes param�tres sous forme de chaine (dans ton cas c'est ce qu'il faut faire).
Tu as pour le moment:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<p><img name="photo1" class="photo1" onclick="diaporama(photo1)" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>

Remplace par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<p><img name="photo1" class="photo1" onclick="diaporama('photo1')" onmouseover="this.style.cursor='pointer'" src="images/reduites/image26.jpg" alt="" /></p>

La diff�rence se situe au niveau du param�tre pass� � la fonction 'diaporama'.

Fait aussi bien attention � bien s�parer les attributs de balise HTML (par des espaces), �a n'a pas l'air d'�tre toujours le cas.

Pour les fonctions, ne t'en fais pas c'est un coup � prendre, �a viendra tout seul � force d'utilisation

**Crocomadaire** · 15/01/2008, 14h20

J'ai mis mes param�tres sous forme de chaine, mais �a ne marche toujours pas...
Je te remercie de ton aide qui m'est pr�cieuse, je suis bloqu�e depuis plusieurs jours sur ce probl�me.
Une autre id�e pourquoi ce code ne fonctionne pas ?

Edit: ho, pour le moment je testais tout sous Firefox, mais j'ai tent� l'aventure avec IE, et le diaporama fonctionne parfaitement... donc le soucis vient de mon firefox ? mais pourquoi ?

**roro06** · 15/01/2008, 18h00

Bonjour

divgaucheimggrosse.src = 'images/normales/image26.jpg';

Seul IE acceptera d'adresser des �l�ments de cette mani�re, pour les autres navigateurs, la syntaxe � utiliser est :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById("divgaucheimggrosse").src='images/normales/image26.jpg';

(sans oublier de rajouter l'id correspondant � ta balise img)

**Crocomadaire** · 15/01/2008, 22h58

Hum, m�me en changeant cela, il n'y a toujours aucune r�action sur Firefox. En revanche j'ai test� avec conqueror, un navigateur de Linux, et le code fonctionne tr�s bien.

**roro06** · 16/01/2008, 09h09

Et que te dis la console javascript de FF ?

**Crocomadaire** · 16/01/2008, 09h47

Ah ! hihi, c'�tait juste un truc tr�s tr�s tr�s tr�s b�te. J'avais fait une petite faute de frappe.
Piouf, merci beaucoup de votre aide, vous m'avez bien fait avancer.

Diaporama complexe en Javascript

JavaScript

Discussions similaires

Partager

Partager