Comment changer dynamiquement votre image d’arrière-plan en JavaScript

Posté Par: Windows2022tutosur: janvier 14, 2023Dans: TechPas De Commentaires

Comment changer dynamiquement votre image d’arrière-plan en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment changer dynamiquement votre image d’arrière-plan en JavaScript. Ce tutoriel a pour but de permettre de changer dynamiquement votre image de fond. Cela couvrira toutes les fonctions de base changera votre arrière-plan Je fournirai un exemple de programme pour montrer le codage réel de ce didacticiel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système si vous souhaitez modifier librement votre image d’arrière-plan. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Modifier l’image d’arrière-plan. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que l’image et le cadre de l’image. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
 
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Change your Background Image Dynamically in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<a href="index.html" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span></a>
		<div class="col-md-12" style="border:1px dashed #000; padding:10px;">
			<img src="images/image1.jpg" onclick="changeBackground(this)" height="100" width="100"/>
			<img src="images/image2.jpg" onclick="changeBackground(this)" height="100" width="100"/>
			<img src="images/image3.jpg" onclick="changeBackground(this)" height="100" width="100"/>
			<img src="images/image4.jpg" onclick="changeBackground(this)" height="100" width="100"/>
			<img src="images/image5.jpg" onclick="changeBackground(this)" height="100" width="100"/>
		<br style="clear:both;"/><br />
		<div class="col-md-6" style="border:1px solid #000; height:350px; width:100%;" id="display"></div>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code changera dynamiquement votre image d’arrière-plan lorsque vous cliquerez dessus. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function changeBackground(image){
	document.getElementById('display').innerHTML="";
	document.getElementById('display').style.backgroundImage="url('"+image.src+"')";
	document.getElementById('display').style.backgroundSize="cover";
	document.getElementById('display').style.backgroundPosition="center center";
}

Le code ci-dessus est simple et très simple, ce code ne contient que quelques codes et l’appellera changement de fond(). Ce code peut automatiquement changer votre arrière-plan en définissant toutes les images avec cette fonction lorsqu’ils ont cliqué sur les images.

Sortir:

Les Comment changer dynamiquement votre image d’arrière-plan en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment changer dynamiquement votre image d’arrière-plan en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici