Insérer une image dynamiquement dans une page web

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 <g;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 ='http://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
Sélectionner 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 ='http://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 = ' http://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
Sélectionner 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 = ' http://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

Regarder aussi nos cours :

fonction substr_count, substr_count

Compte le nombre d'occurrences de segments dans une chaîne

fonction implode, implode

Rassemble les éléments d'un tableau en une chaîne

les grilles en bootstrap

Comment on utilise le système de grilles Bootstrap 3 pour deviser facilement les pages web en lignes et colonnes.