oujood.com

Insérer une image dynamiquement dans une page web

insérer une image dynamiquement dans une page, créer un élément <img> et l’insérer au document en utilisant JavaScript.
Donne un élément HTML, la tâche consiste à créer un élément <img> et l'ajouter au document en utilisant JavaScript.

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.

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


  Copier le code

<!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


  Copier le code

<!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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe