Assombrir fond de la page selon l'heure

Essaies avec quelque chose comme ça (à optimiser en fonction de tes besoins): ...

Eh bien, merci... comme me l'ont conseillé PA5CAL, p4bl0 et gloup gloup, je vais faire avec une même image décliné en plusieurs versions, mais ça me sera peut-être quand même utile pour plus tard.
Et même maintenant, je peux le lire pour essayer d'y comprendre quelque chose... c'est toujours intéressant.
 
Bon, en restant sur la solution d'un lot de 25 images de fond différentes, j'ai fait une page qui s'assombrit plus ou moins en fonction de l'heure.

Si ça vous intéresse, vous pouvez la voir ici.

J'ai finalement réussi à calculer approximativement la latitude de l'utilisateur à partir de l'adresse IP, en faisant appel à un "IP2Country" extérieur (qui assez lent, je dois dire, alors patience au moment du premier chargement !).

Les résultats ne sont pas vraiments précis, mais c'est suffisant pour ce qu'on en fait.

J'ai mis deux boutons pour lancer une simulation rapide du temps qui passe. Ça démarre dans le noir à 5h du matin, et ça avance à raison de 15 ou 7,5 minutes toutes les secondes. L'heure est affichée dans la barre d'état du navigateur.

J'ai fait ça assez vite, et je n'ai testé que sous Safari.
 
  • J’aime
Réactions: Laurent_h
Marche pas sous Camino ;):rateau:
J'avoue que ça fait carton un peu sous camino :rateau:

je vais essayer avec Saf'

PIAF: Ah ouais ça marche carrément dans Safari on voit ses latitude / longitude et l'heure de levé et de couché du soleil :)
 
Sous Camino (version 1.5), le texte jaune apparaît en noir et le chargement des images de fond est parfois plus long que l'avancement de la simulation. Mais globalement, dans le principe, ça marche...

Bon, ce n'est pas très esthétique, mais ce n'est qu'un proof of concept.
 
Sympa ! Et l'idée de calculer la luminosité en fonction de la longitude, etc, est plutôt bien pensée !
Avec ta permission, j'aimerais bien pouvoir l'utiliser.
 
Bonjour a tous. J'ai vu que vous etiez arriver a ce que vous vouliez.
Voila, je n'ai absolument aucune connaisssance en javascript.
J'utilise wordpress pour migrer mon site internet et je voudrait faire un peu comme vous.
C'est a dire faire changer l'image de mon background en fonction d'une plage horaire.

Je sait que ce n'est pas non plus génial de demander mais vu que je ne connais rien, pourriez vous me faire un petit script pour wordpress ou un hybride (j'adapterais) qui ferait comme suit oubien y a t'il une fonction php qui me permettrait de mettre en fond l'image d'un autre site internet ?

Merci d'avance pour vos réponses !
 
Le script inclus dans l'exemple que j'ai donné fournit une réponse possible à ta question.

Sinon, pour utiliser l'image de fond d'un autre site, il suffit d'indiquer l'adresse de cette image dans le param&#232;tre "background=" du tag "<body>". Le code javascript correspondant est:

document.body.background = ... (adresse de l'image)

A moins de vouloir absolument effectuer un calcul de sa valeur sur le serveur web (qui ne conna&#238;t pas forc&#233;ment l'heure qu'il est chez l'utilisateur), il n'est pas n&#233;cessaire d'&#233;crire de code en php.

... ceci dit je n'ai peut-&#234;tre pas tout compris &#224; la question...
 
en fait ce qui me serait utile c'est in code php ou javascript peu importe mais qui releve ladresse du fond d'ecran d'une page web (dont le fond change x heure) et que ce script mette cette meme image en fond sur mon site. en fait que le script aille voir toutes les heures si le fond du site a changer ou non et qu'il fasse les modif si besoin est.
 
Ça se complique.

Côté serveur (programme en php), on n'a pas forcément (quasiment jamais, même) accès à la consultation de pages extérieures. Donc là, à moins d'avoir son propre serveur, je pense qu'on peut oublier.

Côté client (programme en javascript), il faudrait télécharger la page extérieure (ok) sans l'afficher (pas toujours possible), puis l'analyser afin de retrouver quelle est l'image sert de fond. Si cette image est fixée dans le code (fabriquée par du code php au niveau d'un serveur) ce n'est pas encore trop compliqué. Par contre si elle est calculée par le navigateur (javascript), ça risque de devenir carrément inextricable, même si ce n'est pas totalement impossible. Toujours est-il que le code permettant la récupération de l'image doit être fabriqué au cas par cas, selon le site visé.
 
Ok, cela m'avance un petit peu.
Voici mon site (futur) http://www.secondlife-fr.net/wordpress/

Voici la page en question http://secondlife.com/app/login/
Si on regarde le code source de cette page on voit le css et le code et on a les lien direct vers les images.

En fait sur cette page, le fond change en fonction de l'heure de Second Life.

Ce que je souhaite c'est avoir le même fond que cette page même lorsqu'elle change sur mon site.

Vous voyez ? ^^
 
Et le CSS, peut-il en fonction de l'heure du client afficher une image pr&#233;d&#233;finis.
Mais que en CSS ? ou que en PHP ?

Sur la page en question cit&#233; plus haut, dans le code source il y a ce script javascript :

<script type="text/javascript">
function setImage()
{
var images = Array( "http://s3.amazonaws.com/static-secondlife-com/login_screens/log_01.jpg", "http://s3.amazonaws.com/static-secondlife-com/login_screens/log_02.jpg", "http://s3.amazonaws.com/static-secondlife-com/login_screens/log_03.jpg", "http://s3.amazonaws.com/static-secondlife-com/login_screens/log_04.jpg");
var myDate = new Date();
var hour = myDate.getHours();
// var index = Math.floor(hour/8);
var index;
if (hour < 5)
{
index = 3;
}
else if (hour < 10)
{
index = 0;
}
else if (hour < 18)
{
index = 1;
}
else if (hour < 21)
{
index = 2;
}
else if (hour < 24)
{
index = 3;
}
else
{
index = 1;
}
document.getElementById('mainImage').src = images[index];
}

</script>


Ca peut aider ?
 
Pour charger les images en question, tu peux par exemple ajouter ce code javascript:
Bloc de code:
<script type="text/javascript"><!--
function image_de_fond() {
  var now = new Date();
  var h = now.getHours(); 
  var index; 
  if (h < 5) index = "04";
  else if (h < 10) index = "01";
  else if (h < 18) index = "02";
  else if (h < 21) index = "03";
  else if (h < 24) index = "04";
  else index = "02";

  document.body.background = "http://s3.amazonaws.com/"
         + "static-secondlife-com/login_screens/log_" + index + ".jpg";
}
//--></script>
puis compl&#233;ter la balise body :
Bloc de code:
<body onload="image_de_fond();">
 
Eh bien ca a l'air de fonctionner. Je te remercie beaucoup car le javascript c'est pas trop mon truc. Faudrait que je l'y mette.

Merci encore et si je peut faire quoi que ce soit, sauf du javascript lol, il n'y a aucun soucit. Merci ^^

Ah par contre l'image ne reste pas figer deriere ?

Euh juste encore une petite question lol, est - il possible de r&#233;cuperer sur la page http://secondlife.com/app/login/ l'heure qui y est afficher (heure de Second Life) et de l'afficher sur ma page ? en php surement.

Mais le probleme c'est que cela risque de ralentir le serveur de cette page car il doit falloir utiliser une fonction style get non ?

Et peut etre aussi la ligne ou il y a ecrit Grid Status ONLINE OU OFFLINE merci !
 
On ne peut pas deviner ce qui se passe sur le serveur de Second Life, et donc on ne peut pas récupérer directement ces infos écrites en dur dans la page (générées par php probablement).

Pour les récupérer, il faudrait charger la page sans l'afficher et l'analyser avec du code javascript. Ça risque de devenir une véritable usine à gaz.
 
oui il me semblait bien, je ferait une horloge simple avec decalage pour correspondre avec l'heure voulu.

Merci pour le script, mais commen faire pour figer l'image de fond ?

Merci encore.
 
Non c'est bon j'ai trouver, le CSS je connait.

En tout cas merci pour tout. Ah si, euh une horloge en javascript ou je puisse ajouter un d&#233;calage pour correspondre avec l'heure de Second Life c'est realisable ?
 
Voil&#224; pour afficher l'heure de Second Life (480 minutes avant Greenwich) toutes les secondes dans un <div>
Bloc de code:
<script type="text/javascript"><!--

function [COLOR="Blue"]tick()[/COLOR]
{
  var date1jan = new Date(2000,0,1,0,0,0);
  var diff = date1jan.getTimezoneOffset() - [COLOR="DarkRed"]480[/COLOR];

  var now = new Date();
  now.setTime(now.getTime() + diff * 60000);

  var h = now.getHours();
  var m = now.getMinutes();
  if (m < 10)
    m = "0" + m;
  var s = now.getSeconds();
  if (s < 10)
    s = "0" + s;
  var str = h + ":" + m + ":" + s + " ";
  if (h>11)
    str += "PM";
  else
    str += "AM";

  var hdiv = document.all ? document.all["[COLOR="SeaGreen"]horloge[/COLOR]"]
             : document.getElementById("[COLOR="SeaGreen"]horloge[/COLOR]");
  hdiv.innerHTML = str;

  setTimeout("[COLOR="Blue"]tick()[/COLOR]", 1000);
}

//--></script>
avec un
Bloc de code:
<body onload="[COLOR="Blue"]tick();[/COLOR]">
et un
Bloc de code:
<div id="[COLOR="SeaGreen"]horloge[/COLOR]">&nbsp;</div>