Vous avez un site internet et vous cherchez à mettre des images en JavaScript, afin de le rendre plus interactif ? Nous allons vous expliquer comment procéder.
Comment faire pour afficher une image en JavaScript ?
Pour commencer, vous devez savoir que vous ne pouvez afficher les images en JavaScript que depuis le code source de votre site ou blog internet. Votre image est repérable avec la balise <img>. Sachez également que votre image doit absolument contenir certaines informations pour qu’elle puisse s’afficher. Il s’agit de
- la hauteur de l’image « height »
- la largeur de l’image « width »
- la source « src »
- un « alt »
Pourquoi utiliser du JavaScript pour ses images ?
Dans la plupart des cas, les images affichées sont fixes et définitives, une fois la page web chargée par votre navigateur. Dans ce cas, elles devraient avoir cette forme dans le code source <img src=”votre-image1.jpg” alt=”exemple>.
Si pour une raison, vous souhaitez que votre image change, sans que l’utilisateur ait besoin de rafraîchir sa page, dans ce cas, vous allez avoir besoin d’un minimum de connaissance de l’interface DOM (Document Object Model). Dans ce cas, vous allez devoir faire appel à une variable, ce qui vous permettra de faire changer l’adresse de votre image. Vous aurez donc alternativement <img src=”votre-image1.jpg” alt=”exemple>, puis <img src=”votre-image2.jpg” alt=”exemple>. Comme vous pouvez le voir dans notre exemple, seule l’adresse varie, le « alt » reste identique.
Bien entendu, dans votre code JavaScript, vous allez définir quelle action va induire ce changement d’image. Vous pourrez par exemple changer d’image lorsque l’utilisateur clique sur un bouton. Sachez que le JavaScript permet de nombreuses options :
- le préchargement (si vos images sont lourdes)
- le défilement
- le changement d’orientation
- le redimensionnement…
Vous l’avez sans doute compris, le JavaScript peut vous rendre de très nombreux services tout en permettant de conserver le poids de page très raisonnable. Sachez que cela n’est pas forcément le cas si vous utilisez un carrousel en HTML et en CSS.
Débuter en JavaScript
Si vous souhaitez publier vous-même votre site, vous aurez besoin de vous débrouiller avec JavaScript. La bonne nouvelle, c’est que ce langage de programmation est très populaire. Pratiquement toutes les pages web sont conçues avec. Vous ne devriez pas mettre trop longtemps à trouver des tutoriels ou des formations pour apprendre à maîtriser le JavaScript. D’ailleurs, découvrez notre offre si vous êtes dans cette recherche.
Vous verrez que le JavaScript se décompose en plusieurs blocs :
- le code lui-même
- les instructions conditionnelles
- les boucles
- les fonctions
- les événements
Il ne devrait vous falloir que quelques cours pour être capable d’afficher une image en JavaScript et la faire varier, en fonction de l’action que vous aurez préalablement défini. Dans un second temps, vous apprendrez la programmation asynchrone. Enfin, et pour les plus motivés d’entre vous, vous pourrez apprendre à manipuler des API. Vous aurez alors accès à multitude de services, permettant de créer et de développer des solutions SaaS qui correspondent à vos besoins ou à celle de votre entreprise.