Javascript 11 : Créer, insérer, modifier des images avec Javascript
Cette activité va vous permettre d'apprendre à faire les choses suivantes :
- Créer une balise IMG depuis un script Javascript
- Insérer cette balise dans le document HTML
- Modifier l'attribut scr de l'image
- Modifier les attributs width et height de l'image
Nous allons aujourd'hui apprendre à réaliser une interface ressemblant à cela :
Mais, vous pourriez me dire que vous savez déjà le faire. D'ailleurs, nous l'avons déjà fait dans l'une des activités CSS.
Oui, mais ici nous allons déclarer et créer les images dans Javascript. Nous allons ainsi pouvoir modifier l'affichage avec un code simple et, par exemple, modifier la position des images au hasard.
Et ça, vous ne savez pas encore le faire.
1 - Interface basique
Il va falloir commencer par créer dans un dossier la structure suivante : (vous pouvez télécharger les fichiers à l'aide d'un clic droit)
01° Téléchargez le fichier HTML, le fichier CSS et les 9 images. Placez le tout dans un même dossier.
votre dossier de travail
Pour info, voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="animaux-feroces.css" />
<script src="animaux-feroces.js"></script>
<title>Image et JS</title>
<meta name="description" content="Contient une interface basique pour montrer comment insérer des images en javascript." />
</head>
<body>
<header id="en_haut"> <!-- Cette balise contient le contenu de l'en-tête de la page -->
<p>Animaux féroces</p>
</header>
<section>
<div id="js100_test1">
<div id="bleu"></div>
<div id="orange"></div>
<divid="vert"></div>
<divid="rouge"></div>
<div id="jaune"></div>
<div id="noir"></div>
<div id="violet"></div>
<div id="cyan"></div>
<div id="gris"></div>
</div>
</section>
</body>
</html>
Le CSS :
#js100_test1{
margin: auto;
padding: 0px;
border: 1px solid #660000;
width:800px;
height:650px;
position: relative;
}
#js100_test1 div {
display: inline-block;
margin: 0px;
padding: 0px;
width: 150px;
height: 150px;
border: 1px solid #777777;
}
#js100_test1 div img {
display: block;
margin: auto;
padding: 0px;
margin-top: 50%;
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}
#bleu {
background-color:blue;
position:absolute;
top:50px;
left:50px;
}
#orange {
background-color:orange;
position:absolute;
top:50px;
left:300px;
}
#vert {
background-color:green;
position:absolute;
top:50px;
left:550px;
}
#rouge {
background-color:red;
position:absolute;
top:250px;
left:50px;
}
#jaune {
background-color:yellow;
position:absolute;
top:250px;
left:300px;
}
#noir {
background-color:black;
position:absolute;
top:250px;
left:550px;
}
#cyan {
background-color:cyan;
position:absolute;
top:450px;
left:300px;
}
#gris {
background-color:grey;
position:absolute;
top:450px;
left:550px;
}
#violet {
background-color:purple;
position:absolute;
top:450px;
left:50px;
}
Comme vous le voyez, aucune balise IMG à l'horizon.
Nous allons demander à js de s'en charger.
2 - Création des balises IMG
Nous allons voir que nous allons réussir à modifier les balises img déjà présentes dans le HTML (images, format ...).
Mais, nous pouvons aller plus loin : nous pouvons les créer de toutes pièces alors qu'elles n'apparaissent pas dans le fichier HTML originel.
02° Créer le fichier animaux-feroces.js. Il contiendra le code suivant :
var tImages = [ 'agneau.jpg', 'canard.jpg', 'chaton.jpg', 'ecureuil.jpg', 'yellow', 'lapin.jpg', 'suricate.jpg', 'tarentule.jpg', 'tigre.jpg' ];
function demarrage() {
}
window.addEventListener("load",demarrage);
03° Que devrait-on obtenir si on tape tImages[1] ?
Voyons comment créer une image :
04° Remplacer la fonction demarrage par celle-ci. Tester pour vérifier que le code fonctionne : vous devriez voir apparaitre un canard. Son numéro d'index est bien 1. Le deuxième élément du tableau donc.
function demarage() {
var monImage = document.createElement('img');
monImage.src = tImages[1];
var maDiv = document.getElementById("bleu");
maDiv.innerHTML = '';
maDiv.appendChild(monImage);
}
05° Où le canard est-il apparu ? Quel est l'id de cette div ? Le centrage est-il codifié via le CSS ou le Javascript ?
Regardons de plus près ces 5 lignes de code.
Ligne 1 :
var monImage = document.createElement('img');
Cette ligne permet de créer une balise img (sans la rattacher) et de stocker sa référence dans la variable monImage.
Remarquons l'utilisation d'une nouvelle méthode : createElement.
Passons au choix de l'image : Ligne 2 :
monImage.src = tImages[1];
Pour modifier l'attribut src de la balise HTML, nous utilisons la propriété src (du même nom) dans javascript.
Ici, je place le nom de mes images une fois pour toutes dans le tableau (nommé Array en javascript) et je vais ensuite chercher dans le tableau l'image de mon choix.
Ainsi, si je dois changer le nom de mon image, je n'ai à modifier le code qu'à un endroit.
La balise img est créée et on lui a attribué un fichier-image de type jpg.
Mais elle n'apparaitrait pas encore à l'ecran car nous n'avons pas placé cette balise à l'intérieur du code HTML.
Lignes 3 et 4 :
var maDiv = document.getElementById("bleu");
maDiv.innerHTML = '';
Je vais chercher le noeud qui correspont à la balise HTML d'id voulue. Je place la référence dans la variable maDiv.
La deuxième ligne me permet d'aller chercher le contenu de la div et de la vider : si elle contenait déjà une image ou un texte, on le supprime donc.
Maintenant que la balise div est vidée, nous la remplissons avec l'image en utilisant une nouvelle méthode sur la référence de la div voulue : appendChild sur la Ligne 5 :
maDiv.appendChild(monImage);
Comme vous le voyez, nous agissons sur la réfénce de la div (maDiv) et nous lui rajoutons la référence à notre image (monImage).
06° Rajouter quelques lignes de code pour faire de même avec une autre case colorée.
Maintenant que vous avez compris nous allons pouvoir passer à l'automatisation.
3 - Modification globale des balises div
Pour agir de façon automatisée sur les balises, nous allons utiliser l'une des méthodes de sélection de balises multiples. Puisqu'il s'agit de sélectionner les balises div contenues dans la balise-conteneur d'id js100_test1 :
function demarrage(){
var listeDiv = document.querySelectorAll("#js100_test1 div");
for (var i = 0; i < listeDiv.length; i++) {
listeDiv[i].style.backgroundColor = "blue";
var monImage = document.createElement('img');
monImage.src= tImages[1];
var maDiv = listeDiv[i];
maDiv.innerHTML = '';
maDiv.appendChild(monImage);
}
}
07° Utiliser cette fonction. Vous devriez avoir toutes les balises div contenant une image identique sur un fond bleu.
08° Modifier le code de façon à utiliser la variable i et le tableau des images pour faire afficher les images automatiquement dans l'ordre des div.
...CORRECTION...
function demarrage(){
var listeDiv = document.querySelectorAll("#js100_test1 div");
for (var i = 0; i < listeDiv.length; i++) {
listeDiv[i].style.backgroundColor = "blue";
var monImage = document.createElement('img');
monImage.src= tImages[i];
var maDiv = listeDiv[i];
maDiv.innerHTML = '';
maDiv.appendChild(monImage);
}
}
09° Trouver la raison de l'absence d'image sur l'indice 4.
...CORRECTION...
Dans le tableau, on trouve "yellow" à la place du nom du fichier voulu. Il faut donc placer le bon nom de fichier pour l'index 4.
Pas mal. Vous savez maintenant créer des balises (img, mais ça fonctionne avec les autres), les placer dans le document HTML dans la balise qui vous intéresse et configurer l'image qui doit s'afficher, en prenant éventuellement les adresses dans un tableau.
4 - Modification de la taille
Pour agir sur la taille, nous allons devoir modifier la largeur (width) et la hauteur (height).
Normalement, lorsqu'on insère une balise img en dur, on précise la taille de l'image à la suite de son src :
<img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165">
Cela permet au navigateur de préparer la place pour l'image une fois celle-ci téléchargée.
Sans cela, sur une page présentant de multiples images, on peut voir la page 'sautée' à chaque fois qu'une image arrive.
Avec notre façon d'insérer les images dynamiquement, nous allons avoir le même effet malheureusement. Si vous voulez l'éviter, il faut créer les balises images directement dans le HTML et préciser au moins leurs tailles, même si vous laissez les attributs src vides.
Nous allons d'abord voir comment récupérer à l'aide de la propriété naturalWidth et naturalHeight la taille de l'image dans le fichier-image originel :
J'ai rajouté une fonction afficherTaille qui liste toutes les images à l'aide de la méthode adéquate. Ensuite, on ne travaille qu'à partir de l'image d'index 7 (pour ne pas avoir trop d'affichages) et on affiche la taille de l'image initialement stockée dans le fichier.
Cette fonction afficherTaille est appelée à la fin de la fonction demarrage.
function demarrage() {
var listeDiv = document.querySelectorAll("#js100_test1 div");
for (var i = 0; i < listeDiv.length; i++) {
listeDiv[i].style.backgroundColor = "blue";
var monImage = document.createElement('img');
monImage.src= tImages[i];
var maDiv = listeDiv[i];
maDiv.innerHTML = '';
maDiv.appendChild(monImage);
}
afficherTaille()
}
function afficherTaille() {
var listeDiv = document.querySelectorAll("#js100_test1 div img");
for (var i = 7; i < listeDiv.length; i++) {
var monImage = listeDiv[i];
alert("Image " + i + " de taille " + monImage.naturalWidth + " x " + monImage.naturalHeight);
}
}
10° Utiliser ce code pour vérifier qu'on obtient bien la taille initiale des images.
Bon. Il reste à savoir modifier la taille des images. Essayons de les diminuer par deux.
Pour cela, on va pouvoir utiliser les propriétés width et height.
Si on utilise monImage.width = "54", nous pourrions parvenir à modifier la taille de l'image dans la balise-image. Ce qui ne change rien à sa taille naturelle, dans le fichier-image.
11° Rajouter quelques lignes à la fin de la fonction afficherTaille de façon à diminuer la taille des images d'index 7 et 8 par deux.
Attention : gérez le fait que les nombres de pixels ne peut être qu'un entier. La fonction parseInt(x) a donc toute son importance.
Une solution possible :
...CORRECTION...
function afficherTaille() {
var listeDiv = document.querySelectorAll("#js100_test1 div img");
for (var i = 7; i < listeDiv.length; i++) {
var monImage = listeDiv[i];
var largeur = monImage.naturalWidth;
var hauteur = monImage.naturalHeight;
monImage.width = parseInt(largeur*0.5);
monImage.height = parseInt(hauteur*0.5);
}
}
12° Supprimer la ligne où on modifie la hauteur. Le code fonctionne-t-il toujours ? Que semble faire automatiquement le navigateur ?
5 - Mini-projet
Quelques idées de réalisations :
- Rajouter des événements "click" sur les div
- 13° La fonction d'événement devra réduire l'image si elle est petite et l'agrandir si elle est grande.
- 14° Afficher les images au hasard.
- 15° Changer le fond en rouge lorsqu'on clique sur un animal dangereux.
- 16° Changer le fond en vert si on clique sur un animal pas si dangereux que cela.