Comment insérer et gérer des images avec JavaScript ?

JavaScript est un langage de programmation créé pour rendre le web dynamique et interactif. Et les images, tout comme les formulaires, y contribuent dans une large mesure. HTML, a priori, suffit à ajouter des images sur une page web. À des fins esthétiques, les développeurs lui associent du code CSS, qui améliore la mise en forme des images. Avec JavaScript, il devient possible d'agir sur le comportement des images.

JavaScript permet d'insérer une image et de gérer son comportement. Faire défiler un carrousel, mettre une image en mouvement, la modifier au passage du curseur de la souris ou encore générer un affichage aléatoire : JavaScript étend les possibilités et facilite l'animation, la manipulation et le contrôle des images.

1 - Créer l'élément avec createElement

Pour insérer une image avec JavaScript, il faut tout d'abord créer l'élément image. Le code est le suivant : var imagejavascript = document.createElement("img").

2 - Indiquer l'URL avec l'attribut src

Une fois l'élément image créé, il faut spécifier son URL. Cela permet au navigateur de trouver le chemin pour aller récupérer le fichier. Pour indiquer l'URL, le code est le suivant : imagejavascript.src = "adresse URL source".

À noter que l'attribut src est l'adresse URL du site où extraire l'image, ou le nom du fichier image préalablement enregistré dans le répertoire de la page HTML.

3 - Afficher l'image avec appendChild

Pour afficher l'image avec appendChild, il faut spécifier l'élément parent existant auquel rattacher l'image. Illustrations :

• Si l'image doit s'afficher dans le corps du document HTML, le code est : document.body.appendChild(imagejavascript).
• Si l'image est rattachée à un élément « div » de la page, le code est : div.appendChild(imagejavascript).

Voici le script pour insérer une image en JavaScript dans le corps d'un document HTML :

<script>

var imagejavascript = document.createElement("img");

imagejavascript.src = "https://assets.codepen.io/6093409/sprocket.svg";

document.body.appendChild(imagejavascript)

</script>

Résultat :

See the Pen javascript-image_inserer-image by HubSpot France (@HubSpot-France) on CodePen.

Comment faire défiler des images en JavaScript ?

De très nombreux sites web utilisent le défilement d'images pour rendre leurs pages dynamiques et attractives. Cette fonctionnalité permet à un internaute de feuilleter un album photos ou de visualiser un produit sous diverses formes, par exemple. On parle couramment de carrousel ou de diaporama. Il existe une multitude de manières de faire défiler des images :

• Les images défilent horizontalement ou verticalement.
• Le défilement parallaxe est très populaire en webdesign.
• L'animation du carrousel peut être manuelle, auquel cas l'utilisateur passe d'une image à l'autre en cliquant sur des flèches, ou automatique, où le temps d'arrêt sur image est défini dans le code JavaScript.
• Les images du diaporama peuvent être cliquables, pour servir de menu de navigation par exemple.

Faire défiler des images en JavaScript nécessite une excellente maîtrise des langages HTML, CSS et JavaScript. Le code en effet est complexe. Pour faciliter l'exercice et aller plus vite, les développeurs peuvent prendre appui sur des frameworks et des bibliothèques JavaScript, tels que jQuery.

Quel que soit l'effet souhaité, plusieurs méthodes permettent de faire défiler des images avec JavaScript. Voici une méthode parmi d'autres pour créer un carrousel animé manuellement, où les images défilent horizontalement.

1 - Créer des conteneurs avec les balises div HTML

Dans un premier temps, il faut créer trois types de conteneurs dans le code HTML de la page web, grâce aux balises div.

• Le conteneur principal indique au navigateur qu'il faut afficher un carrousel. Il peut être codé ainsi : <div id="carrousel"> ou <div id="diaporama">.
• Le deuxième conteneur contient la liste de tous les éléments à afficher dans le carrousel. Il est possible de faire défiler des images, mais aussi des vidéos. Ce conteneur contient, le cas échéant, les titres et la description des images. Pour créer un carrousel animé manuellement, il faut ajouter des flèches gauche et droite dans ce conteneur.
• À l'intérieur du deuxième conteneur, il faut créer autant de conteneurs qu'il y a d'images dans le diaporama. Pour faire défiler trois images, par exemple, il faut créer trois conteneurs div d'images.

Créer ces différents conteneurs div HTML est essentiel pour appliquer à chacun un style distinct, avec CSS.

2 - Appliquer des styles avec CSS

Une fois les conteneurs créés et nommés, il faut aller dans le CSS pour leur appliquer un style.

• Pour le conteneur principal « carrousel » ou « diaporama » : le code CSS permet de spécifier les dimensions de la boîte, le type et la couleur des bordures et d'éventuels effets tels qu'une ombre portée.
• Pour les éléments images : de la même manière, CSS permet de mettre en forme l'affichage. Les images peuvent par exemple être plus petites que le cadre de la boîte carrousel, ou remplir tout l'espace de la boîte.
• Pour les flèches : le style des flèches, ou de tous autres boutons de défilement, peut également être personnalisé avec CSS. Position, dimensions, changement d'apparence au survol de la souris ou encore effet de transparence : chaque flèche peut être stylisée de manière avancée.

3 - Créer les images du carrousel avec JavaScript

Une fois le code HTML et le code CSS renseignés, il faut écrire le script de défilement des images. Le script doit mentionner certaines variables : nombre d'images à faire défiler et position initiale, notamment.

Puis le script appelle les différentes éléments du diaporama : les images et les flèches gauche et droite. Pour récupérer ces éléments, il faut utiliser la fonction JavaScript getElementById("nom de l'élément à récupérer").

Il faut ensuite coder le traitement itératif qui va générer les images du carrousel. Chaque image est appelée depuis son div HTML. Les images y ont été créées avec createElement, src et appendChild.

Il faut enfin programmer les boutons de défilement, c'est-à-dire indiquer qu'un clic sur le bouton gauche fait défiler le carrousel vers la gauche, et inversement. À cette étape, il est possible d'appliquer des effets de transition : le passage d'une image à une autre se fait en x secondes, par exemple.

Exemples de codes

Voici un exemple de codes HTML, CSS et JavaScript pour créer un diaporama de trois couleurs, avec des flèches et une barre de défilement :

See the Pen javascript-image_diaporama-couleurs by HubSpot France (@HubSpot-France) on CodePen.

Le code HTML renseigne les différents éléments à afficher dans le diaporama : flèches de défilement et couleurs à faire défiler. Le code CSS applique un style au diaporama et aux flèches, et indique les références des couleurs. Le code JavaScript décrit le comportement du diaporama : un clic sur une flèche fait défiler les couleurs, et la barre de défilement avance en conséquence.

Voici un exemple de codes HTML, CSS et JavaScript pour afficher un logo en cliquant sur un bouton :

See the Pen javascript-image_afficher-logo-clic by HubSpot France (@HubSpot-France) on CodePen.

Le code HTML structure les éléments : titre et bouton. Le code CSS personnalise l'apparence du bouton. Le code JavaScript affiche le logo avec createElement, l'attribut src et appendChild.

Voici un exemple d'animation d'image avec JavaScript :

See the Pen javascript-image_animation-image by HubSpot France (@HubSpot-France) on CodePen.

Dans cet exemple, l'image change au survol du pointeur de la souris.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.