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