Changer le background suivant jour et nuit

Version imprimable

Bonjour à toutes et à tous,

J'aimerai pouvoir changer le background de ma page suivant l'heure du jour et la nuit.

Je suis plutôt orienté Delphi donc un peu d'indulgence.

Voici le code qui m'affiche mon background :
Code:

1 2 3 <BODY bgcolor="#000000" background= "Data/Fond.jpg" bgproperties="fixed" topmargin="5"> </BODY>
Peut être avec un javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script LANGUAGE="JavaScript" > function affiche_image(){ ma_date=new Date(); heure=ma_date.getHours(); minute=ma_date.getMinutes(); seconde=ma_date.getSeconds(); if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) { image='<img src="nuit.jpg">'; } if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) { image='<img src="nuit.jpg">'; } document.write(image); } </script
Mais sans succès.

Merci de l'aide éventuelle.

@+,

Cincap

05/02/2010, 17h09
SpaceFrog

Code:

document.body.style.backgroundImage="url(nuit.jpg)";

@ SpaceFrog, merci de ta réponse mais soit je m'y prends mal soit le chemin des images n'est pas reconnu.

Voici mon test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script LANGUAGE="JavaScript" >
 
function affiche_image(){
ma_date=new Date();
heure=ma_date.getHours();
minute=ma_date.getMinutes();
seconde=ma_date.getSeconds();
if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) {
image='<img src="Data/Fond.jpg">';
}
if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) {
image='<img src="Data/Fondnuit.jpg">';
}
document.body.style.backgroundImage="url(Data/Fond.jpg)";
}
</script>
</HEAD>
<BODY  onload="affiche_image()" bgcolor="#000000" bgproperties="fixed" topmargin="5">
</BODY>

@+,

Cincap

Code:

1 2 3 4 5 6 7 8 9 var heure=new Date().getHours(); switch(heure<8 && heure>19){ case true: document.body.style.backgroundImage="url(nuit.jpg)"; break; case false: document.body.style.backgroundImage="url(jour.jpg)"; break; }
Pour info, les heures sont comprises entre 0 et 23 et les minutes et secondes entre 0 et 59, donc la majorité de tes tests sont équivalents à 1==1 ;)

Code:

1
2
var heure=new Date().getHours();
document.body.style.backgroundImage=(heure<8 && heure>19)?"url(nuit.jpg)":"url(jour.jpg)";

05/02/2010, 22h30
nours312

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

un autre langage serai-il pas Bien plus adapté à ce genre de onction ? php par exemple ...
ça éviterais d'ajouter des script Totalement inutile au navigateur ... Javascript est plus en adéquation avec la gestion dynamique de l'interface que l'implémentation d'un élément "static" ...

Enfin, c'est mon avis, mais je peux aussi me tromper ^^
06/02/2010, 09h49
Bovino

Citation:

Envoyé par nours312

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

un autre langage serai-il pas Bien plus adapté à ce genre de onction ? php par exemple ...
ça éviterais d'ajouter des script Totalement inutile au navigateur ... Javascript est plus en adéquation avec la gestion dynamique de l'interface que l'implémentation d'un élément "static" ...

Enfin, c'est mon avis, mais je peux aussi me tromper ^^

Oui, tu as tout à fait raison :mrgreen:
C'est effectivement plus sensé de gérer cela coté serveur...

Bonjour à toutes et à tous,

@ Bovino et SpaceFrog, :ccool: merci de cette solution que je testerai cet après midi avant de fermer ce topic.

@ SpaceFrog,:P tu as l'art de simplifier le code alors que j'étais parti sur plus compliquer.

J'ai donc fait ceci, mais dans cet état, je ne pense pas que la page va se rafraîchir ?

L'image "Fond.jpg" s'affiche !
Code:

1 2 3 4 5 6 7 8 <script LANGUAGE="JavaScript" > var heure=new Date().getHours(); document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Fondnuit.jpg)":"url(Fond.jpg)"; </script> </HEAD> <BODY bgcolor="#000000" bgproperties="fixed" topmargin="5"> </BODY>
@ Nours312

Citation:

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

Tu as tout à fait raison, mais j'appelle une page Html dans une fiche codée avec Delphi, sur cette page Html, il y a comme animation une horloge qui se promène suivant la position du curseur.

Je devais donc intervenir en JavaScript puisque le code de départ l'est.

@+,

Cincap

:nono:
Ta solution ne peut pas fonctionner car lorsque tu fixes le background sur le body, celui-ci n'existe pas encore dans ton document !
Code:

1 2 3 4 5 6 7 8 9 <script LANGUAGE="JavaScript" > function setBckGrnd(){ var heure=new Date().getHours(); document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Fondnuit.jpg)":"url(Fond.jpg)"; } </script> </HEAD> <BODY bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()"> </BODY
Attention aussi, les attributs de style (bgcolor bgproperties...) au-delà d'être fortement déconseillées, peuvent entrer en conflit avec les règles CSS...

@ Bovino, si je fais comme tu dis, je n'ai plus aucun affichage de l'image.

Mon code :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script LANGUAGE="JavaScript" > 
 function setBckGrnd(){   
    var heure=new Date().getHours();
    document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Data/Fondnuit.jpg)":"url(Data/Fond.jpg)";
}
</script>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">
</BODY>

A ne rien comprendre.

@+,

Cincap

06/02/2010, 10h50
SpaceFrog

pour gerer ça coté serveur il faut que le serveur soit calé sur le même fuseau horaire que le client ou alors sniffer l'heure du client, autant le faire directement en js ce qui evite un aller retour.
06/02/2010, 11h09
cincap
@ Spacefrog, en fait cette page Htlm est simplement affichée dans ma fiche Delphi ou j'ai déjà un code Javascript qui gère l'heure et la date.
Code:

1 2 3 4 5 ClockAndAssign(); setTimeout('Delay()',10); } if (ns||ie)window.onload=Delay;
Je dois certainement appliquer le new code dans celui qui existe déjà pour l'horloge, mais où ?

Je vais tester cela, car quand j'enlève le 1er code horloge mon image s'affiche bien comme vous l'avez suggéré avec le new code.

Edit: je viens d'insérer le new code dans le 1er et je n'ai pas d'erreur et l'image "Fond.jpg" s'affiche, je vais voir comment tricher sur l'heure pour constater que "Fondnuit.jpg" s'affiche.

@+,

Cincap

Bon je viens de faire le test des deux propositions avec une new page.

Code:

1
2
3
4
5
6
7
8
9
 
<script LANGUAGE="JavaScript" >
function setBckGrnd(){
    var heure=new Date().getHours();
    document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Data/Fondnuit.jpg)":"url(Data/Fond.jpg)";
}
</SCRIPT> 
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">

ou :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script LANGUAGE="JavaScript" >
function setBckGrnd(){
 var heure=new Date().getHours();
switch(heure<8 && heure>19){
case true:
document.body.style.backgroundImage="url(Data/Fondnuit.jpg)";
break;
case false:
document.body.style.backgroundImage="url(Data/Fond.jpg)";
break;
}
}
</SCRIPT>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">

Seul l'image "Fond.jpg" s'affiche même si je change l'heure dans les propriétés Windows (ex: 22H).

@+,

Cincap

06/02/2010, 14h11
nours312

Citation:

pour gerer ça coté serveur il faut que le serveur soit calé sur le même fuseau horaire que le client ou alors sniffer l'heure du client, autant le faire directement en js ce qui evite un aller retour.

Je ne pensais Juste pas que ct à la seconde prés !... cela dit, il est vrai que ça évite les pb de décalages Horaire et tout le toutim ^^

Citation:

j'ai déjà un code Javascript qui gère l'heure et la date.

ok, dans ce cas, il serait sympa que tu la couple directement avec ton Horloge et envisager l'appel de ta fonction à Heure fixe en plus d'un appel au chargement, ça permettrait ainsi de changer "en Live" le Fond arrivé à 19H et/ou 8h00 ... py par la suite pourquoi ne pas proposer un fond différent pour toutes les heures de la journée !? lol ^^

heure<8 && heure>19

comment peut-elle etre à la fois inférieur à 8 et supérieur à 19 !??

(heure<8 || heure>19) devrait mieux fonctionner ;)

@++
06/02/2010, 14h43
cincap

@ Nours312, merci de ta réponse, en effet cela est bien mieux comme cela tu as vu juste,

en mettant 19H30 pas de changement par contre dès 20H, l'image nuit s'affiche, enfin cela ne doit pas être rigoureux ce changement d'affichage.

Citation:

par la suite pourquoi ne pas proposer un fond différent pour toutes les heures de la journée !?

Pas dans mon cas car je n'ai besoin que de différencier l'affichage de 8H du matin à 19H.

Je vais tester avant de fermer ce topic mais je pense que c'était cette correction qu'il fallait.

Merci encore à tous.

@+,

Cincap
06/02/2010, 20h16
nours312

si tu veux que ça change à 19H soit tu met heure>18, soit tu met heure>=19 ;) logique non ?
07/02/2010, 10h46
cincap

Bonjour à toutes et à tous,

@ Nours312, il va de soit, logique.

Pour ma part j'ai testé en incluant ce code dans le code Horloge tout en reprenant les variables existantes et cela fonctionne correctement.

Il serait judicieux et curieux de voir comment le faire en divisant la journée en 3 parties (matin, après midi et soir).

Ceci étant dit, je remercie tout le monde.

Je ferme le topic.

@+,

Cincap
07/02/2010, 10h57
SpaceFrog

avec un switch

@ SpaceFrog, salut,

Citation:

avec un switch

8O Désolé mais je suis ignorant avec le Javascript, en tenant compte de ce code qui fonctionne, il suffirait d'insérer un swich (une commande) :
Code:

1 2 document.body.style.backgroundImage=(hr<=8 || hr>=19)?"url(Data/Fondnuit.jpg)":"url(Data/Fondjour.jpg)";
Peut être comme ceci :
Code:

1 2 3 4 5 6 7 if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) { image='<img src="nuit.jpg">'; } if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) { image='<img src="nuit.jpg">'; }
Je testerai à l'occasion.

Encore merci pour tes conseils,

@+,

Cincap

J'obtiens un bon résultat avec ceci :

Code:

1
2
3
4
5
6
7
8
9
10
 
if ((hr>=8) && (hr<=13) && (mins<60) && (secs<60)) {
document.body.style.backgroundImage= "url(Data/Fondjour.jpg)";
}
if ((hr>=13) && (hr<=19) && (mins<60) && (secs<60)) {
document.body.style.backgroundImage= "url(Data/Fondcoucher.jpg)";
}
if ((hr>=19) && (hr<=8) && (mins<60) && (secs<60)){
document.body.style.backgroundImage= "url(Data/Fondnuit.jpg)";
}

Il y a certainement plus simple pour les cracks de ce forum !

@+,

Cincap

juste pour le plaisir ^^

Code:

1
2
3
4
5
 
 
var hr=new Date().getHours();
 
document.body.style.backgroundImage= ((hr>=8) && (hr<14)) ? "url(Data/Fondjour.jpg)" : ( ((hr>=14) && (hr<20)) ? "url(Data/Fondcoucher.jpg)" : "url(Data/Fondnuit.jpg)" );

07/02/2010, 18h55
cincap

@ Nours312, :ccool:

Merci pour le plaisir.
Juste une constatation, le défilement de mon horloge est ralentit mais cela ne pose pas de problème.

Encore merci à tous les braves de ce forum.

@+,

Cincap

Un dernier mot !

Bonjour à toutes et à tous,

Je me demandais, avec cette fonction :
Code:

1 2 3 4 5 6 7 8 <script LANGUAGE="JavaScript" > function affiche_image(){ ma_date=new Date(); hr=ma_date.getHours(); document.body.style.backgroundImage= ((hr>=8) && (hr<10)) ? "url(Data/Fondjour.jpg)" : ( ((hr>=10) && (hr<19)) ? "url(Data/Fondcoucher.jpg)" : "url(Data/Fondnuit.jpg)" ); *} </script>
en pricipe je devrais placer l'exécution dans le Body :
Code:

1 2 <BODY bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="affiche_image()">
si c'est le cas, seul problème le fond ne change pas automatiquement à l'heure dans la fiche Delphi qui n'utilise pas le navigateur.

Je suppose que placé à cet endroit, le Navigateur rafraîchit la page automatiquement ?

Comment faire alors !

Employé un Timer ?

N.B, pour mon cas, j'ai placé "affiche_image()" dans la fonction Delay de l'horloge et là rien à redire

@+,

Cincap

Pour contrer la lenteur du déplacement de l'horloge à cause de la new fonction pour le background, j'ai essayé de placer un setTimeout mais cela ne fonctionne pas car je dois placer:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script LANGUAGE="JavaScript" > function affiche_image(){ ma_date=new Date(); hr=ma_date.getHours(); document.body.style.backgroundImage= ((hr>=8) && (hr<16)) ? "url(Data/Fondjour.jpg)" : ( ((hr>=16) && (hr<19)) ? "url(Data/Fondcoucher.jpg)" : "url(Data/Fondnuit.jpg)" ); *} setTimeout('affiche_image()',10); </script> et dans le <BODY bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="affiche_image()">
Ma page Htlm se trouve dans une fiche Delphi et je ne pense pas que le refresh de la page soit accessible comme avec le Navigateur.

L'idéal serait le changement réel dans la fonction mais....

Quelqu'un a t'il une idée sinon je laisse comme cela.

Edit : C'est Ok, j'ai rajouté ceci dans le Body:
Code:

1 2 3 4 5 6 <script language="JavaScript" type="text/javascript">  </script>
@+,

Cincap

Fuseau horaire GMT +2. Il est actuellement 05h01.