Changer le background d'un site via bouton [Fermé]

Signaler
-
Messages postés
421
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
29 septembre 2015
-
Bonjour,


Voila je développe actuellement un site internet et j'aurais aimé que le visiteur puisse choisir parmi 3 images de background en appuyant sur un bouton (un bouton par image).

j'ai cherché sur le net et je n'ai rien trouvé de concluant, hormis une astuce pour changer la couleur du background.

Si l'un de vous peut m'aider je suis tout ouïe.

Merci de m'avoir lu.

4 réponses

Messages postés
421
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
29 septembre 2015
44
Bonjour,

L'opération est trés simple avec jquery et meme sympa une fois maitrisé. Tu n'as qu'à faire deux petits appels à deux fonction prédifinis dans jquery : removeClass et addClass.
on appelle removeClass pour annuler un type de mise en forme et addClass pour appliquer une autre.

Bon, voilà le code c'est assez simple :

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  	<script type="text/javascript"> /* -------------- Ce code va te permettre de changer le background quand tu clique sur un lien --------------- */

		$(document).ready(function(){ 

			$("li.one").click( function(){ $
				("body").removeClass('bg2 , bg3').addClass("bg1"); 
			});

			$("li.two").click( function(){ $
				("body").removeClass("bg1 , bg3").addClass("bg2"); 
			});

			$("li.three").click( function(){ $
				("body").removeClass("bg1 , bg2").addClass("bg3"); 
			}); 
				
		});

	</script>
	 <style>
.bg1 { background: url(votre_image_içi) repeat; background-color: #6c0000; }
.bg2 { background: url(votre_image_içi) repeat; background-color: #5A2A00; }
.bg3 { background: url(votre_image_içi) repeat; background-color: #00345B; }
</style>
</head>
<body>
<ul>
	<li class="one"><a href="#">Background 1</a></li>
        <li class="two"><a href="#">Background 2</a></li>
        <li class="three"><a href="#">Background 3</a></li>
</ul>
</body>
</html>




Attention : changer le contenu de url(votre_image_içi) par le chemin ou se trouve votre image.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 58222 internautes nous ont dit merci ce mois-ci

Messages postés
5290
Date d'inscription
mercredi 28 janvier 2009
Statut
Contributeur
Dernière intervention
29 mai 2016
748
Yop,

Pour changer la couleur de fond, tu changes l'attribut "background-color" n'est-ce pas?
Pour l'image de fond, c'est pas "background-image" ?
T'as plus qu'à utiliser l'astuce déjà trouvée, et à modifier 2-3 trucs dedans ;)
j'ai déjà essayer de modifier l'astuce du changement de couleur, et le résultat est négatif ^^'

je n'arrive pas à obtenir mes images, je reste avec un fond blanc.
Messages postés
112
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
19 juillet 2012
12
Salut !
Utilise le javascript !!!

<html>  
 <head></head>  
 <body style="background-color:white;" id="body">  
 <input type="button" value="Rouge" onclick="document.getElementById('body').style.backgroundColor='red';" /><br/>  
 <input type="button" value="Jaune" onclick="document.getElementById('body').style.backgroundColor='yellow';" /><br/>  
 <input type="button" value="Bleu" onclick="document.getElementById('body').style.backgroundColor='blue';" /><br/>  
 </body>  
</html> 

Je pense que ca marche ^^