Bonjour
voila je suis en train de créer une galerie d'image pour un site
une partie de la galerie a été prise sur le net, et j'essaye d'améliorer cette galerie
voici le code :
Celui ci marche très bien,
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 function displayPics() { var photos = document.getElementById('galerie_mini') ; // On récupère l'élément ayant pour id galerie_mini var liens = photos.getElementsByTagName('a') ; // On récupère dans une variable tous les liens contenu dans galerie_mini var big_photo = document.getElementById('big_pict') ; // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; // Et enfin le titre de la photo de taille normale // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini for (var i = 0 ; i < liens.length ; ++i) { // Au clique sur ces liens liens[i].onclick = function() { big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien big_photo.alt = this.title; // On change son titre titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo return false; // Et pour finir on inhibe l'action réelle du lien }; } }
de mon côté j'ai rajouter 2 bouton
et là le javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <input type="button" id="Droite" style="border:0px solid; background:url(Images/logo_files/FlecheGauche.gif) center; height:40pt; width:60pt;" /> <input type="button" id="Gauche" style="border:0px solid; background:url(Images/logo_files/FlecheDroite.gif) center ; height:40pt; width:60pt;" />
je préviens, je n'ai pas réellement appris le javascript
j'ai tout de même essayé puisque c'est avant tout de la logique :
Pouvez vous m'aider svp ?
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 function changePics() { var droite = document.getElementById('Droite'); var big_photo = document.getElementById('big_pict') ; var gauche = document.getElementById('Gauche'); var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; var i=0; droite.onclick { i++; } gauche.onclick { i--; } if (i==0) { big_photo.src='Images/Locaux/Accueil.jpg'; titre_photo.firstChild.nodeValue = 'Accueil'; } if (i==1) { big_photo.src='Images/Locaux/Entree.jpg'; titre_photo.firstChild.nodeValue = 'Entree'; } if (i==2) { big_photo.src='Images/Locaux/Exterieur.jpg'; titre_photo.firstChild.nodeValue = 'Exterieur'; } if (i==3) { big_photo.src='Images/Locaux/parking.jpg'; titre_photo.firstChild.nodeValue = 'Parking'; } if (i==4) { big_photo.src='Images/Locaux/Chambre.jpg'; titre_photo.firstChild.nodeValue = 'Chambre' ; } if (i==5) { big_photo.src='Images/Locaux/Salleamanger.jpg'; titre_photo.firstChild.nodeValue ='Salle à Manger'; } }
Merci
Partager