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 :
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
|
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
};
}
} |
Celui ci marche très bien,
de mon côté j'ai rajouter 2 bouton
Code :
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;" /> |
et là le javascript
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 :
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 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';
}
} |
Pouvez vous m'aider svp ?
Merci