La fonction

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

Il faut maintenant créer la fonction JavaScript qui gérera la galerie. On peut commencer par l'appeler dans la page HTML en plaçant cette ligne dans la partie <head> : <script type="text/javascript" src="script.js" >

Le fichier script.js. est donné ci-contre.

Voilà la galerie fin prête à être visitée.

Un exemple de galerie d'images est présenté sur le site d'Alsacréations.

Page précédente

Retour au sommaire

Page suivante

Introduction | XHTML | CSS | La fonction | En savoir plus

Haut de page