Un bel album photos

Le toucan
La tortue
La forêt

Le code CSS correspondant

... figure img {width :40% ; } figure figcaption {text-align : center ; } figure {display : none ; } ...

Par défaut les balises figure sont masquées ; comme chaque image et sa légende est contenue dans une balise figure les images et légendes sont masquées.

Le code HTML correspondant

... <button type ='button'>afficher images</button> <button type ='button'>masquer images</button> <figure><img src = '../images/toucan.jpg'> <figcaption>Le toucan</figcaption></figure> <figure><img src = '../images/tortue.jpg'> <figcaption>La tortue</figcaption></figure> <figure><img src = '../images/foret.jpg'> <figcaption>La forêt</figcaption></figure> ...

Comme il a été dit plus haut chaque élément img est contenu dans figure.

Le code JavaScript

Via JavaScript il faut changer la valeur d'une propriété de style !
Ici il faut que la valeur de la propriété display de chaque élément figure passe de block à none et vice versa.

Il faut donc utiliser la syntaxe : noeud.style.propriété = nouvelle valeur

... var figures = document.querySelectorAll('figure') ; // figures est un tableau qui cible toutes les balises figure var vnombre = figures.length ; // nombre d'éléments du tableau figures document.querySelectorAll('button')[0].onclick = function() { for(i = 0 ; i<= vnombre ; i++) { figures[i].style.display = 'block' ; } } // fin fonction document.querySelectorAll('button')[1].onclick = function() { for(i = 0 ; i<= vnombre ; i++){figures[i].style.display = 'none' ; } } // fin fonction ...

figures est une variable objet globale et plus précisément un tableau global qui référence toutes les balises figure.
Donc figures.length retourne le nombre de balises figure dans la page.

Si clic sur le premier noeud button appel d'une fonction anonyme qui modifie la valeur de la propriété display : display passe à "block" pour chaque élément figure.

Si clic sur le deuxième noeud button appel d'une fonction anonyme qui fait l'inverse.

En utilisant le framework Jquery le code aurait été plus succint car avec cette bibliothèque on manipule plus aisément le DOM. Les boucles deviendraient inutiles puisqu'avec Jquery on peut manipuler dans la même instruction tous les noeuds correspondant à un sélecteur.
Ce thème est repris dans la partie jquery de ce tuto.
Retour menu