Afficher/masquer images avec JS

Exemple 1

Le code CSS & HTML

img {display : none ; width : 30% ; } ... <button type ='button'>afficher images</button> <button type ='button'>masquer images</button> <img src = '../images/jolie_fille.jpg'> <img src = '../images/trikini.jpg'> <img src = '../images/bikini.jpg'>

Le script correspondant

var images_page = document.images ; // utilisation de l'objet document.images document.querySelector('button').onclick = function() { for(i in images_page) { images_page[i].style.display = 'block' ; } } // fin fonction document.querySelectorAll('button')[1].onclick = function() { for(i in images_page){images_page[i].style.display = 'none' ; } } // fin fonction

Il suffit d'utiliser l'objet natif document.images qui référence sous forme d'un tableau toutes les images d'une page.

Mais si vous ignoriez l'existence de cet objet natif, vous auriez pu écrire : var images_page = document.querySelectorAll('img');
La variable image_pages est déclarée en dehors des deux fonctions. Donc elle est globale vis à vis des fonctions.
Deux fonctions anonymes : la première déclenchée si clic sur premier bouton de commande (indice zéro) ; la deuxième déclenchée si clic sur deuxième bouton de commande (indice 1).
Dans chaque fonction emploi de la structure for ... in !

Tests


Testez cette page!

Exemple 2

Le code CSS & HTML

figure figcaption {text-align : center ;} figure {display : none ; border :1px solid black; width : 50% ; margin : 10px auto 10px auto; } figure img {width : 80% ; } ... <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>

Chaque image est "enfant" de figure.
Il faut afficher/masquer les éléments figure et de facto leurs "enfants" (balises img, figcaption) seront affichés/masqués.

Le script correspondant

Le script précédent ne peut être utilisé ici car chaque image est intégrée dans le conteneur figure.

var figures = document.querySelectorAll('figure') ; document.querySelectorAll('button')[0].onclick = function() { for(var i in figures) {figures[i].style.display = 'block' ; } } // fin fonction document.querySelectorAll('button')[1].onclick = function() { for(var i in figures) {figures[i].style.display = 'none' ; } } // fin fonction

Il suffit de créer une variable objet qui référence sous forme d'un tableau toutes les balises figures de la page.
La variable figures est déclarée en dehors des deux fonctions donc elle est globale vis à vis des fonctions.
Deux fonctions anonymes : la première déclenchée si clic sur premier bouton de commande (indice zéro) ; la deuxième déclenchée si clic sur deuxième bouton de commande (indice 1).
Dans chaque fonction emploi de la structure for ... in !

Tests


Testez deuxième exemple!
Retour menu