11548 sujets

JavaScript, DOM et API Web HTML5

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