Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Background body qui change selon une valeur déterminée

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Background body qui change selon une valeur déterminée

Message par *Splash* Lun 13 Aoû 2018 - 10:34

Hi,

Existe-t-il un moyen de faire en sorte que l'image background du body change selon des paramètres déterminés ?
Par exemple, 4 images pour 4 saisons
20 mars image de printemps
21 juin image d'été
23 septembre image d'automne
21 décembre image d'hiver

Thème du forum, AwesomeBB

Merci d'avance
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background body qui change selon une valeur déterminée

Message par MasDan Lun 13 Aoû 2018 - 22:31

Bonjours *Splash*,

Ajouter ce javascript (placement sur toutes les pages)
Code:
var tabImg = [ "lien image printemps",
              "lien image été",
              "lien image automne",
              "lien image hiver" ];

$(function(){
  "use strict";

  let dt = new Date();
  let moisJour = (dt.getMonth() +1) * 100 + dt.getDate();
 
  let i = 3;
  if ( moisJour >= 320 && moisJour < 621 ) {
    i = 0;
  } else if ( moisJour >= 621 && moisJour < 923 ) {
    i = 1;
  } else if ( moisJour >= 923 && moisJour < 1221 ) {
    i = 2;
  }
 
  $("body").css("background-image", "url(" + tabImg[i] + ")" );
});

et inclure vos images aux lignes 1 à 4.
MasDan

MasDan
Aidactif
Aidactif

Masculin
Messages : 1521
Inscrit(e) le : 24/05/2011

Voir le profil de l'utilisateur http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background body qui change selon une valeur déterminée

Message par *Splash* Lun 13 Aoû 2018 - 23:00

Merci je vais essayer.

Quid des dates à rentrer pour le changement d'image ?
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background body qui change selon une valeur déterminée

Message par MasDan Lun 13 Aoû 2018 - 23:09

Non aucune date à modifier, le bloc suivant détermine l'image à afficher
Code:
let i = 3;
  if ( moisJour >= 320 && moisJour < 621 ) {
    i = 0;
  } else if ( moisJour >= 621 && moisJour < 923 ) {
    i = 1;
  } else if ( moisJour >= 923 && moisJour < 1221 ) {
    i = 2;
  }

Ligne 2: 320 et 923 pour le 20 mars et le 23 septembre
idem pour les lignes 4 et 6.

Le javascript détermine selon la date du jour laquelle de vos 4 images doit être affiché.
MasDan

MasDan
Aidactif
Aidactif

Masculin
Messages : 1521
Inscrit(e) le : 24/05/2011

Voir le profil de l'utilisateur http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background body qui change selon une valeur déterminée

Message par *Splash* Lun 13 Aoû 2018 - 23:16

OK

Je ferai un essaie en modifiant les dates pour vérifier le changement de background
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background body qui change selon une valeur déterminée

Message par *Splash* Mar 14 Aoû 2018 - 7:40

Merci MasDan, cela fonctionne parfaitement
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum