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

1tpe

Regarder aussi nos cours :

XPATH syntaxe

XPATH syntaxe

fonction strrpos, strrpos

Trouve la position de la dernière occurrence d'une sous- chaîne dans une chaîne

fonction gmmktime

Retourne le timestamp UNIX d'une date GMT


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci