Bonjour,
Je voudrais améliorer un diaporama : actuellement une div "galerie_mini" contrôle 2 div :
une div "big_pict" : ouvre la src.
une div "dt" : texte descriptif de la photo
J'aimerai qu'il y est 2 façons de faire défiler les photos :
- soit la technique actuelle : on clic sur 1,2,3 etc... de la galerie_mini
- soit en cliquant sur la photo big_pict on passe à la photo suivante
mais, débutant, je ne comprends pas où intervenir dans le javascript et surtout comment attribuer un évènement à un objet déjà en mouvement...
Voici mon script :
Je voudrais améliorer un diaporama : actuellement une div "galerie_mini" contrôle 2 div :
une div "big_pict" : ouvre la src.
une div "dt" : texte descriptif de la photo
J'aimerai qu'il y est 2 façons de faire défiler les photos :
- soit la technique actuelle : on clic sur 1,2,3 etc... de la galerie_mini
- soit en cliquant sur la photo big_pict on passe à la photo suivante
mais, débutant, je ne comprends pas où intervenir dans le javascript et surtout comment attribuer un évènement à un objet déjà en mouvement...
Voici mon script :
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
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
[/i]