Assombrir fond de la page selon l'heure

Chamyky · 16 Juillet 2007

Laurent_h a dit:
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.

PA5CAL · 16 Juillet 2007

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.

Laurent_h · 16 Juillet 2007

PA5CAL a dit:
J'ai fait ça assez vite, et je n'ai testé que sous Safari.

Marche pas sous Camino

:rateau:

p4bl0 · 16 Juillet 2007

Laurent_h a dit:
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

PA5CAL · 16 Juillet 2007

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.

Chamyky · 16 Juillet 2007

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.

Teruki Shan · 29 Juillet 2007

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 !

PA5CAL · 29 Juillet 2007

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è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ît pas forcément l'heure qu'il est chez l'utilisateur), il n'est pas nécessaire d'écrire de code en php.

... ceci dit je n'ai peut-être pas tout compris à la question...

Teruki Shan · 29 Juillet 2007

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.

PA5CAL · 30 Juillet 2007

Ç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é.

maousse · 30 Juillet 2007

ou générer ta feuille css avec php :
http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/

Teruki Shan · 30 Juillet 2007

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 ? ^^

Teruki Shan · 30 Juillet 2007

Et le CSS, peut-il en fonction de l'heure du client afficher une image prédéfinis.
Mais que en CSS ? ou que en PHP ?

Sur la page en question cité 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 ?

PA5CAL · 30 Juillet 2007

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éter la balise body :

Bloc de code:

<body onload="image_de_fond();">

Teruki Shan · 30 Juillet 2007

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é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 !

PA5CAL · 30 Juillet 2007

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.

Teruki Shan · 30 Juillet 2007

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.

PA5CAL · 30 Juillet 2007

Teruki Shan a dit:
Merci pour le script, mais commen faire pour figer l'image de fond ?

C'est-à-dire ?

Teruki Shan · 30 Juillet 2007

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écalage pour correspondre avec l'heure de Second Life c'est realisable ?

PA5CAL · 30 Juillet 2007

Voilà 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>

Assombrir fond de la page selon l'heure

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Membre confirmé

Membre expert

Membre confirmé

Membre expert

Membre expert

Membre confirmé

Membre confirmé

Membre expert

Membre confirmé

Membre expert

Membre confirmé

Membre expert

Membre confirmé

Membre expert

Sujets similaires