TP : réaliser un diaporama en JS

Palourde royale

Cliquez sur l'une des miniatures ci-dessous et l'image s'affichera en grand dans la boîte au dessus avec en légende le nom de l'espèce.

Palourde royale Danseuse espagnole Ormeau Nautile

Le code de la page

Le code CSS & HTML

... div {width : 50% ; height :300px ; margin :auto; border : none; background-image: url(../images/palourde_royale.jpg); background-repeat : no-repeat; background-size : cover;} </style> ... <table> <tr> <td><img src ="../images/palourde_royale.jpg" alt ='Palourde royale' onclick ='afficher(this)'></td> <td><img src ="../images/danseuse_espagnole.jpg" alt ='Danseuse espagnole' onclick ='afficher(this)'></td> <td><img src ="../images/ormeau.jpg" alt ='Ormeau' onclick ='afficher(this)' ></td> <td><img src ="../images/nautile.jpg" alt ='Nautile' onclick ='CSS3(this)'></td> </tr> </table> ...

Le code CSS :
Notez l'emploi de la nouvelle propriété CSS3 : background-size pour que les dimensions de l'image de fond s'adaptent à celles du conteneur. Pour plus d'explications voir "tutoriel CSS3" dans le même site.

Le code HTML :
Les images miniatures sont disposées dans un tableau monoligne (une image dans chaque cellule).
Pour chaque balise img il y a non seulement l'attribut src mais aussi l'attribut alt et onclick.
Ainsi si clic sur une image appel de la fonction afficher avec passage d'un paramètre : this (qui cible donc ici l'image courante).

Le script

		var boite = document.querySelector('div'); 
		var legende =document.querySelector('h4');
		
		function afficher(image) 
		{ 
			var source = image.getAttribute('src'); 
			source = "url(" + source +")" ;
			boite.style.backgroundImage =source ; 
			var texte = image.getAttribute('alt');
			legende.textContent = texte; 
		}

On crée deux variables objets boite et legende qui référencent respectivement la balise DIV et la balise H4.

Dans la fonction afficher la variable image représente l'image courante.
Avec la méthode getAttribute on récupère les valeurs des attributs src et alt de l'image courante.
Dans la variable source on construit la nouvelle valeur de la propriété de style backgroundImage.
Dans la variable texte on construit la nouvelle valeur de la propriété textContent.

Adaptation du code

Si vous voulez un diaporama avec 5 images il suffit d'ajouter une cellule au tableau HTML contenant la balise img. Mais il n'y aura rien à modifier dans le code JavaScript !
Retour menu