Comment insérer une image dynamiquement dans une page web à l’aide de JavaScript ?
La tâche est de créer un élément <img> et l’insérer au document en utilisant JavaScript. Dans ces exemples, nous allons utilisé l’événement click, mais il est tout à fait possible d’utiliser tout autre événement JavaScript.
Quand on clique sur le bouton, puis l’élément image <img> est crée.
var img = document.createElement('img');
• Ensuite, définissez ses attributs comme
(src, hauteur, largeur, alt, titre, etc.).
img.src ='https://www.oujood.com/balises/images/ bout468x60_1.png';
img.alt='image crée dynamiquement';
img.title='image crée dynamiquement';
• Enfin, insérez le dans le document.
document.getElementById('corps' ).appendChild(img);
Exemple : Cet exemple met en œuvre l’approche ci-dessus.
Approche 1 : Utilisation de la méthode createElement()
• Créer un élément img vide en utilisant la méthode createElement().var img = document.createElement('img');
• Ensuite, définissez ses attributs comme
(src, hauteur, largeur, alt, titre, etc.).
img.src ='https://www.oujood.com/balises/images/ bout468x60_1.png';
img.alt='image crée dynamiquement';
img.title='image crée dynamiquement';
• Enfin, insérez le dans le document.
document.getElementById('corps' ).appendChild(img);
Exemple : Cet exemple met en œuvre l’approche ci-dessus.
Code : HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Insérer une image dynamiquement dans une page web à
l’aide de JavaScrip
</title>
</head>
<body id ="corps" style = "text-align:center;">
<h1 style ="color:darckgreen;" >
Oujood est mon site
</h1>
<p id ="Bimg" style ="font-size: 15px; font-weight:
bold;"> </p>
<button onclick ="creerImage()">
click ici
</button>
<p id ="parent" style="color:green; font-size: 20px;
font-weight: bold;">
</p>
<script>
document.getElementById('Bimg').innerHTML = "Click sur
le bouton pour ajouter l'image au document";
function creerImage() {
var img = document.createElement('img');
img.src='https://www.oujood.com/balises/images/bout468x60_1.png';
img.alt='image crée dynamiquement';
img.title='image crée dynamiquement';
document.getElementById('corps').appendChild(img);
document.getElementById('parent').innerHTML = "Voici
l'image ajoutée.";
}
</script>
</body>
</html>
Approche 2 :Utilisation de la méthode new Image()
Créer une instance d’image vide à l’aide de la méthode new Image().
img = new Image();
Ensuite, définissez ses attributs comme (src, hauteur, largeur, alt, titre, etc.).
img.src = ' https://www.oujood.com/balises/images/bout468x60_1.png';
img.alt='image crée dynamiquement';
img.title='image crée dynamiquement';
Enfin, insérez-la dans le document.
document.getElementById('body').appendChild(img);
Exemple 2 : Cet exemple met en œuvre l’approche ci-dessus.
Exemple 2 : Cet exemple met en œuvre l’approche ci-dessus.
Code : HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Insérer une image dynamiquement dans une page web
à l’aide de JavaScrip
</title>
</head>
<body id = "body" style = "text-align:center;">
<h1 style = "color:green;" > Oujood est mon
site </h1>
<p id = "Bimg" style= "font-size: 15px;
font-weight: bold;">
</p>
<button onclick = " creerImage ()">click ici
</button>
<p id = "GFG_DOWN"
style="color:green;font-size: 20px;font-weight:bold;">
</p>
<script>
document.getElementById('Bimg').innerHTML = " Click sur
le bouton pour ajouter l'image au document";
var down = document.getElementById('GFG_DOWN');
function creerImage () {
var img = new Image();
img.src='https://www.oujood.com/balises/images/bout468x60_1.png';
img.alt='image crée dynamiquement';
img.title='image crée dynamiquement';
document.getElementById('body').appendChild(img);
down.innerHTML = " Voici l'image ajoutée.";
}
</script>
</body>
</html>
Retour à l'accueil du site
Par carabde 28 Février 2021
