Changer le background d'un site via bouton

Fermé

ßubulle - 4 juil. 2011 à 09:24
wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 - 4 juil. 2011 à 10:16

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.

A voir également:

Changer le background d'un site via bouton
Changer dns - Guide
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Site inaccessible - Guide
Nouveau site coco chat ✓ - Forum Réseaux sociaux

4 réponses

Réponse 1 / 4

wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 46
4 juil. 2011 à 10:16

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.

Réponse 2 / 4

Apatik Messages postés 5304 Date d'inscription mercredi 28 janvier 2009 Statut Contributeur Dernière intervention 29 mai 2016 782
4 juil. 2011 à 09:29

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 ;)

Réponse 3 / 4

ßubulle
4 juil. 2011 à 09:44

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.

Réponse 4 / 4

brute Messages postés 112 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 19 juillet 2012 13
Modifié par brute le 4/07/2011 à 10:14

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 ^^

Discussions similaires

Nouveau coco tchat ?

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire

Chemin Logo du site de la Cité de l'espace

Bouton ON OFF, O ou I ?