Changer le background d'un site via bouton

ßubulle -
wAxxx Messages postés 421 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

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
Quel site remplace coco - Accueil - Réseaux sociaux
Site pour vendre des objets d'occasion - Guide

4 réponses

Réponse 1 / 4

wAxxx Messages postés 421 Date d'inscription Statut Membre Dernière intervention 46

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 Statut Contributeur Dernière intervention 782

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

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 Statut Membre Dernière intervention 13

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

C'est quoi le site qui remplace coco chat

Où est la touche SHIFT sur mon clavier d'ordi ?

Votre réponse

Discussions similaires