18008 sujets

Questions générales et questions de débutants

[Résolu] Déterrage sujet de 2009 et chtite question:banner en fct de l

Bonjour à tous,

voili voilou je déterre une question qui avait été posée en 2009 mais bon l html et le css ont évolués depuis et à l'époque il était question d'heures et non pas de dates.

donc,

Pour faire 1 petit site pour le resto d'un cousin j'ai utilisé les excellents templates de html5up (et j'ai bien mis un lien vers ce site sur chaque page, normal il faut rendre à César...), c'est du responsive design en html+css, ça me convient parfaitement

la question:

sachant que la bannière principale est le fichier banner.jpg , est-il possible de faire une bannière pour printemps/été et une bannière automne/hiver AVEC un changement automatique (soit avec 2 fichiers mais qui seraient copié/collé avec un changement de nom pour banner.jpg /// soit en indiquant de choisir l'un ou l'autre en fonction de la date) Smiley cligne

vu que le changement est pour 2 fois dans l'année, pour l'instant manuellement c'est pas la mer à boire Smiley biggrin c'est juste pour voir si c'est possible et aisé ...

merci à tous pour votre participation

P.S. : hormis le html+css ou je "bricole" si il faut inclure du php ou js faudra bien me décrire sinon je vais faire du gloubiboulga ... Smiley eek
Bonjour Nounours,
pour ce que tu veux faire, 3 ou 4 lignes de javascript suffiront.

1. récupérer la date de l'ordi du visiteur (celle du serveur par php n'est pas plus utile et elle est plus compliquée à mettre en œuvre)
2. en considérer le mois et le jour
3. les comparer à 4 séries de 3 mois (pour les 4 saisons) + la date antérieure ou postérieure à chaque changement de saison : <21 ou >=21 de mars juin septembre décembre
4. au regard des conditions : appliquer le changement de bannière

À toi de surfer le web par mots-clés : date saison javascript ... Je gage que tu y trouveras un "script tout fait"
Modifié par pictural (24 Dec 2016 - 14:19)
Tout bien réfléchi, la question était plutôt difficile. C'est ce qui m'a bien effervescé ! et finalement je propose ceci qui semble fonctionner :
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<title>Couleur de saison</title>

<style>
#saison{font-family:papyrus,sans serif;font-size:1.2em;padding:10px;background-color:pink}
</style>

</head>

<body>

<div id="saison">
Bonjour ! en couleur de saison ...
</div>

<script>
	function Saison()
{
var saison=document.getElementById("saison");
var today = new Date();
var ladate=Date.parse(today);
var lannee=today.getFullYear();
var printemps=Date.parse(new Date(lannee, 2, 21));
var ete=Date.parse(new Date(lannee, 5, 21));
var automne=Date.parse(new Date(lannee, 8, 21));
var hiver =Date.parse(new Date(lannee, 11, 21));

if(ladate>=printemps && ladate<ete){saison.style.backgroundColor="springgreen"}
else if(ladate>=ete && ladate<automne){saison.style.backgroundColor="gold"}
else if(ladate>=automne && ladate<hiver){saison.style.backgroundColor="olive"}
else if(ladate>=hiver || ladate<printemps){saison.style.backgroundColor="skyblue"}
};

Saison();

</script>

</body>

</html>
Le script récupère effectivement la date de l'ordi du visiteur.

J'ai opté pour un backgroundColor modifiable, à défaut d'images mais suffisamment expressif pour quiconque copiera-collera le code.

J'ai vérifié l'exactitude de la fonction Saison() en modifiant 3x l'horloge interne de mon ordi pour appliquer un mois de printemps, puis d'été, d'automne et, enfin ce mois d'hiver.

Bon ! j'ai mérité une dœzième (-"Hups ! deuzième" !) bouteille de champagne ce matin du 25 décembre à 05:38: -"Tchinn' tchinn" !
Modifié par pictural (25 Dec 2016 - 05:38)
pictural a écrit :
Bon ! j'ai mérité une dœzième (-"Hups ! deuzième" !) bouteille de champagne ce matin du 25 décembre à 05:38: -"Tchinn' tchinn" !

Bravo ! Et joyeux Noël !
ça à l'air prometteur, le chtit soucis c'est que l'appel du header/banner n'est pas dans l'html mais dans le css; qu'à cela ne tienne j'ai fait 2 CSS avec chacun un nom de header/banner différend , me reste plus qu'à adapter la déclaration du css donc:

<link rel="stylesheet" href="assets/css/main.css" />

qui est dans le <head> de la page html avec la variable de saison ...

joyeux Noël ! Smiley ohwell

j'ai trouvé ça mais ça ne veut pas fonctionner:

https://openclassrooms.com/forum/sujet/changer-de-css-en-fonction-d-une-date-36386

je crois qu'en fait quand il dit "en dehors du header", je dois faire un fichier .php et non pas mette le code dans le body

je pourrais utiliser ça aussi:

https://openclassrooms.com/forum/sujet/affichage-dynamique-en-fonction-des-saisons

mais plutot que de mettre 12 images différentes je mettrais 12 css ça prend moins de place, comment intégrer ça ?
Modifié par nounourspsx (25 Dec 2016 - 11:51)
ou alors intégrer le choix dans le CSS c'est possible ça ??? Smiley confus

non j'ai cherché, pas de if then dans les css ...
Modifié par nounourspsx (25 Dec 2016 - 11:51)
@Olivier C,
merci.

@Nounours,
une solution toute simple sera de créer distinctement 4 class css (dans ton fichier main.css), que les changements de saison appliqueront sur le header en tant qu'élément id :
var chapeau=document.getElementById("chapeau"); //<header id="chapeau">...</header>
//...
if(ladate>=printemps && ladate<ete){chapeau.className="class_de_printemps"}
//...


Et modifier son contenu par :
var chapeau=document.getElementById("chapeau");
//...
contenu_de_printemps="<div class='class_de_printemps'>blablabla</div>";
//...
if(ladate>=printemps && ladate<ete){chapeau.innerHTML=contenu_de_printemps}
//...

Modifié par pictural (25 Dec 2016 - 17:28)
Merci à tous pour vos participations (je ne mets pas RESOLU des fois que d'autres solutions apparaissent ça peut intéresser d'autres personnes)

Et Joyeux noël !!! Smiley cligne
Sujet clos
Aller à