Un atout très important de JavaScript : la manipulation des images sans recharger la page.
Très pratique pour modifier du contenu en direct, créer des bannières défilantes, des albums photos…
Découvrez la modification des images via JavaScript dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Manipulez les images directement avec JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Donc voici un nouveau cours que vous allez probablement apprécier puisqu’il s’agit des images. Comment manipuler les images avec JavaScript sachez qu’il existe des méthodes pour justement que vous puissiez manipuler des images dans une page HTML, et faire à peu près tout ce que vous vous imaginez.
Les images : les propriétés
Déjà je vous présenter les propriétés de la balise image :
Alt c’est un texte qui s’affiche dans une info bulle, lorsque la souris est positionnée au-dessus de l’image, vous allez probablement utiliser souvent le alt,
Border c’est pour définir la taille de la bordure autour de l’image, souvent on met border égal zéro pour enlever la bordure autour de l’image,
Complete ça va vous renvoyer true si l’image dans la page s’est terminée, son chargement est terminé,
fileSize ça va vous renvoyer la taille de l’image en octets,
height et width c’est la hauteur et la largeur de l’image en pixels,
length c’est le nombre d’images présentes dans la page,
name le nom de l’image
src c’est l’URL source de l’image,
title c’est le titre de l’image que vous voyez quand vous passez la souris au-dessus de l’image,
hspace et vspace c’est l’espace des pixels entre une image et les éléments situés à droite et à gauche, vspace c’est les éléments situés en haut et en bas de l’image.
Codes sources pouvant VOUS intéresser :
Comment faire un rollover entre deux images ? Vous avez une image, vous passez la souris, ça modifie l’image, et bien évidemment, en direct sans recharger la page. Vous avez votre balise image, src logo dev facile, l’adresse de l’image, width height la hauteur et la largeur, et vous allez utiliser deux éléments, rappelez-vous le cours sur les événements JavaScript, si vous l’avez oublié, si vous ne l’avez pas vu, je vous invite à consulter dès maintenant le cours sur les événements JavaScript. Donc vous allez écouter l’événement onMouseOver, quand la souris passe au-dessus de l’image, et onMouseOut quand la souris sort de l’image, elle n’est plus au-dessus de l’image. A chaque fois on va appeller la fonction getimage et on va lui passer un argument, l’argument c’est deux objets image1 et image2, regardez le code, image1 on fait un new image avec la taille 250 par 250, on définit sa propriété src donc l’URL, et new image2 on définit sa taille 300 par 300, sa propriété src donc un autre logo, donc il y a deux logos différents, de tailles différentes, dès que la souris arrive sur l’image MouseOver on appelle updateImage avec image2, donc on va afficher le logo dev-facile.jpg, dès que la souris n’est plus au-dessus de l’image, dès qu’elle sort de l’image, updateImage avec image1 et on va afficher le logo dev-facile, la souris arrive au-dessus, c’est as3-facile, la souris sort c’est dev-facile. C’est un exemple de manipulation d’images, vous le voyez souvent dans les titres, très souvent c’est utilisé, ou alors c’est utilisé pour faire des sortes de panoramiques ou l’image change toutes les X secondes, donc là ils n’utilisent pas onMouveOver ou onMouseOut, mais un setTimeout et ils font sur l’objet image.src, ils changent l’URL de l’image, toutes les X secondes.
Donc là justement, un exemple avec une bannière avec un changement d’images toutes les 5 secondes, donc au chargement de la page, on appel la méthode, la fonction startChrono, que fait StartChrono ? Ca définit un setInterval, toutes les 5 secondes on va appeler la fonction changeImage, changeImage qu’est-ce que ça fait ? Ca incrémente un numéro d’image, on peut avoir de 0 à 40 maximum pour la bannière, et tant que le numéro d’image est supérieur ou égal au nombre d’images max, on repart à image 1, sinon on continu d’incrémenter l’image et on fait un document, rappelez-vous l’objet document, je vous renvoie au cours, il vous explique comment toutes les méthodes, les propriétés de l’objet document, donc qu’est-ce qu’on fait, documents récupère l’image, la bannière c’est la première image entre crochets zéro, et on modifie l’attribut src, la propriété src, avec une nouvelle seconde donc le numéro de l’image plus JPEG donc on va dire que les images sont nommées 1, 2, 3, 4,.. jusqu’à 40.JPEG, donc ça boucle et si l’image numéro image vu qu’il l’a incrémentée à chaque fois, toutes les 5 secondes il l’a incrémenté, il est supérieur ou égal à 40, on repart à l’image 1, donc il y a 39 images de 1.JPEG à 39.JPEG.
Et toutes les cinq secondes, l’image va changer, parce qu’on utilise document.image entre crochets la première, la bannière.src URL source d’une image.
Votre plan d’actions !
A votre tour, vous pouvez faire des bannières de défilement, des panoramiques, des roll over sur une image, des zooms, vous avez tout ce qu’il faut pour manipuler les images directement avec le code JavaScript, sans recharger la page, ajouter toutes les interactions utilisateur dont vous avez besoin, retrouvez un exemple de code source sous cette vidéo, si vous avez des questions posez-les également sous cette vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Un exemple de code JavaScript pour mettre à jour une image sans recharger la page web.
Téléchargement du code source Exemple de bannière défilante avec JavaScript
Cliquez ici pour télécharger le code source Exemple de bannière défilante avec JavaScript
Montrez-moi vos manipulations d’images avec JavaScript
Utilisez les commentaires pour montrer vos sites web interactif via JavaScript et les images !