Sujet Précédent Sujet Suivant

Changer de body:background lors d'un clic (appel à une ancre)

Résolu/Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 9 juil. 2015 à 22:10
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 15 juil. 2015 à 00:37
Bonsoir,
Est-il possible de changer un body (background) en cliquant sur une class bouton ?
Voici mon body actuel : 
body {
	width: 100%;
	font: 100%/150% Verdana,sans-serif;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0em;
	padding: 0px;
	background-image: url(LDDC/img/12.png);
	background-position: 100% 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

et la barre de nav sur laquelle je souhaiterais un body différent sur .bt2, bt.3 etc... 
  <ul id="nav">
  <a class="button bt1" href="#introduction">Acceuil</a><a class="button bt2" href="#ancre_2">Green</a><a class="button bt3" href="#ancre_3">Blue</a><a class="button bt4" href="#ancre_4">Red</a>
  </ul>

Merci pour votre aide et bonne soirée,
E.

8 réponses

Réponse 1 / 8
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 12/07/2015 à 01:08
Salut
avec jquery 

$(document).ready(function()
{
$(".bt1").click(function(){$("body").css("background-image", "url(image1.png)");});
$(".bt2").click(function(){$("body").css("background-image", "url(image2.png)");});
$(".bt3").click(function(){$("body").css("background-image", "url(image3.png");});
})


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
2
Réponse 2 / 8
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 14/07/2015 à 23:44
Bon on va faire ca différement c'est a dire pas d'action sur css ou background mais sur les div elle meme

html 
<body> 
    <div class="fixed"></div>
    <div class="fixed1" id="idfixed"></div>
    <div class="fixed2" id="idfixed"></div>
    <div class="fixed3" id="idfixed"></div>
    <div class="fixed4" id="idfixed"></div>
    <div><ul><li><a class="button bt1" href="#introduction">Acceuil</a></li><li><a class="button bt2" href="#ancre_2">Green</a></li><li><a class="button bt3" href="#ancre_3">Blue</a></li><li><a class="button bt4" href="#ancre_4">Red</a></li></ul></div>
</body>


body, html {
    margin:0;
    padding:0;
}
.fixed {
    position:fixed;
    width:100%;
    height:100%;
    background: url(testimg/2.gif);
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index:-1;
    left:0;
    top:0;
    }
.fixed1 {
 background: url(testimg/1.gif);
}
.fixed2 {
 background: url(testimg/2.gif);
}
.fixed3 {
 background: url(testimg/1.gif);
}
.fixed4 {
 background: url(testimg/2.gif);
}
#idfixed {
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    z-index:-1;
    left:0;
    top:0;
}
    
.button {background:red;}


jquery 
$(document).ready(function(){
$(".bt1 , .bt2 , .bt3 , .bt4").click(function(){$(".fixed").fadeOut(1000);});
$(".bt1").click(function(){$(".fixed2, .fixed3, .fixed4").fadeOut(1000);$(".fixed1").delay(1000).fadeIn(1000);});
$(".bt2").click(function(){$(".fixed1, .fixed3, .fixed4").fadeOut(1000);$(".fixed2").delay(1000).fadeIn(1000);});
$(".bt3").click(function(){$(".fixed1, .fixed2, .fixed4").fadeOut(1000);$(".fixed3").delay(1000).fadeIn(1000);});
$(".bt4").click(function(){$(".fixed1, .fixed3, .fixed4").fadeOut(1000);$(".fixed4").delay(1000).fadeIn(1000);});
})


voila c'est testé et ca marche donc ne rien modifier a part les url des background
voila, un merci c'est pas de refus
cordialement
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
Réponse 3 / 8
Eritou
12 juil. 2015 à 20:42
Bonsoir animostab et merci !!!
GE-NIAL ! Mais malheureusement ce code ne fonctionne pas si le body est avec un "background-repeat: no-repeat" (aucun fond dans ce cas, même pas celui du body ! J'y comprends rien :p ). Pour le coup, le "background-size: cover" est bien inutile :( Y'a t'il une astuce pour remédier à ce problème ?
Donc grâce à ton code, le fond (mais répété :( fonctionne superbement :)
Y'a t'il aussi moyen de faire une transition (fondu) au clic pour que l'image n'apparaisse pas brutalement ? Code super efficace sinon ;)
Merci et bonne fin de week-end,
E.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 13/07/2015 à 17:36
Sans tester essaie dans ton css de mettre background au lieu de background-image et meme chose dans le jquery
ou sinon 
$(".bt1").click(function(){$("body").css({ background: "url(image1.png)", backgroundRepeat: "no-repeat", backgroundSize:"cover" });});
0
Réponse 4 / 8
Eritou
13 juil. 2015 à 20:25
Bonsoir animostab et merci pour ta réponse,
Dans le premier cas (mettre background au lieu de background-image et même chose dans le jquery), l'image de fond est en "repeat x & y".
Dans le second cas, l'image ne se répète pas mais n'est pas en "cover" (uniquement 100% en largeur, image fixée au top).
Dans le second cas encore, l'image du .bt4 ne s'affiche plus (mais dans le premier cas, si).
Lors de ces deux tests, j'ai encore tenté de mettre le body en no-repeat : comme hier, plus rien ne s'affiche (images).
J'arrive...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Eritou
13 juil. 2015 à 20:31
C'est bon :)
En répondant à ton message, je continuais les tests (d'où le "j'arrive"), avec entre-autres, des images en-ligne. Désolé, je ne comprends pas pourquoi cela ne marche pas avec mes images, mais quand ces dernières sont en-lignes, ton premier code fonctionne PARFAITEMENT !!! :) Et avec un body no-repeat !!!! TOP !!!
Désolé de ne pas avoir testé avant :p Reste le problème de transition/opacité entre chaque clics/changement de fond. Est-ce possible ?
Un grand merci et bon 14 juillet animostab,
E.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 13/07/2015 à 23:38
c'est possible mais pendant la transition, la transparence de 0 à 1 s'appliquera sur le body (tout le contenu donc) et pas uniquement le background.
il faudrait passer par un div en position fixed 100% X 100% et un z-index qui le mets dessous et le background.
En fait opacity s'applique uniquement au div ou element (ici body) ainsi qu'a tous ses enfants (donc tout le contenu de la page).
donc c'est possible avec animate + div
http://jquery.developpeur-web2.com/documentation/effets/animate.php

ex 
$(".bt1").click(function(){
$("#divfixed").css({ background: "url(image1.png)", opacity: "0" });
      $("#divfixed").animate({ 
        opacity: 1,
      }, 4000 );
});
0
Réponse 6 / 8
Eritou
14 juil. 2015 à 14:04
Bonjour animostab et merci,
Voici mes CSS : 
#divfixed {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: -1;
}

Si j'ai bien compris (chose rare), je devrais appliquer ce script (extrait) : 
$(".bt2").click(function(){
$("#divfixed").css({ background: "[/contents/542-url url](image1.png)", opacity: "0" });
      $("#divfixed").animate({ 
        opacity: 1,
      }, 4000 );
$(".bt3").click(function(){
$("#divfixed").css({ background: "url(image2.png)", opacity: "0" });
      $("#divfixed").animate({ 
        opacity: 1,
      }, 4000 );
});

à celui de ces boutons (extrait) : 
$(".bt2").click(function(){$("body").css("background-image", "url(image1.png");});
$(".bt3").click(function(){$("body").css("background-image", "url(image2.png");});

Malheureusement, rien ne se passe sur ma page. Où ai-je fauté ?
Merci pour ton aide,
E.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juil. 2015 à 15:07
Salut
met un z-index sur body de 10 et un z-index de 1 sur divfixed
pense a mettre la divfixed dans le html (juste après body)
ou la rajouter avec jquery 
$("body").prepend("<div id=\"divfixed\"></div>");


et pense aussi a mettre pour body le css background:transparent;
et aussi de toujours initialiser le script jquery avec 

$(document).ready(function() { ....... })
0
Réponse 7 / 8
Eritou
14 juil. 2015 à 17:36
Ca avance... GREAT :) Pas mal d'erreurs dans mon code réglés grâce à ton dernier message !^^
Mais prod d'images de fond et de... z-index (?)
Mes boutons font appel à un fond (tes scripts... THX !) et à des ancres (aucun soucis jusqu'ici avec elles).
Le but est donc, lors du clic, d'obtenir un "fondu" du fond précédent avec le nouveau. TOP !!! Malheureusement les images se trouvant dans ces lignes : 
$("#divfixed").css({ background: "url(http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg)", opacity: "0" });

ne sont plus en 
background-size: cover
et ces dernières recouvrent mes ancres (en z-index: 40). Mes ancres disparaissent au fur et à mesure de la transition. Peut-on rajouter une classe pour ces "fond-bis" avec un z-index inférieur à 40 et un background-size: cover (désolé si cette question est stupide :/ ) ?
Bonne fin de journée,
E.
0
Réponse 8 / 8
Eritou
15 juil. 2015 à 00:13
Bonsoir animostab,
SPLEN-DI-DE !!! GE-NIAL !!! Le texte (ancres) caché : encore un z-index oublié... :)
Et plus aucun soucis avec Safari (j'étais obligé avec le code précédent de mettre un script pour rafraichîr la page, car plus de transitions au bout de qq secondes). UN GRAND MERCI ET BONNE SOIREE !
E.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
15 juil. 2015 à 00:37
Ok @+
0

Discussions similaires

my.canalbox.africa changer le mot de passe
Thierry973 -
baladur13 -

16 réponses