Partager

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

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting
Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise carte image map

Définit un côté client carte image

Objet date javascript

Objet date javascript : L’ est un objet permettant les manipulations des dates et des périodes.

fonction strtok, strtok

Coupe une chaîne en segments