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 ='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


  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='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


  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='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

Trafic Booster
hebergement web

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 :

Tutoriel guide solo mining litecoins Miner LTC en solo

Tutoriel sur la façon de configurer le Solo Mining c'est-à-dire miner tout seul.

border-spacing

Spécifie la distance entre les frontières des cellules adjacentes

fonction hebrevc, hebrevc

Convertit un texte logique hébreux en texte visuel, avec retours la ligne



Rentabilisez efficacement votre site

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