18041 sujets

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

Changer le header de mon site en fonction de l'heure

Pages :
Bonsoir,

j'aimerais une solution simple et qui fonctionne

Sur mon site j'ai un header normal en haut(header1.jpg)

sur mon FTP il y a header1.jpg et header2.jpg

J'aimerais que le header1 s'affiche de 20 heure jusqu'a 8 heure
Et le header2 de 8 heure a 20 heure

Voila merci beaucoup bonne soiré
Modifié par neo-cortex (21 Jun 2009 - 00:20)
Bonsoir,

Je ne pense pas qu'on va te donner une réponse toute faite, c'est un forum d'entraide...
Cela mis à part, du devrais pouvoir faire facilement ça en récupérant en php la date et attribuer une valeur "header1" dans un créneau horaire et "header2" dans un autre?
tu connais un peu le php?
Oui, un peu comme tu dit.

Mais je cherche un moyen de le faire vraiment simplement sans utiliser PHP
a la limite JS
je veut vraiment un truc simple
Modifié par neo-cortex (21 Jun 2009 - 01:41)
Hello neo-cortex et bienvenue, Smiley smile

comme le JavaScript peut être désactivé / indisponible je te suggère de faire ça en PHP. Et puisque tu parles de faire simple :
<style type="text/css">
<?php
$header = (date(G) > 7 && date(G) < 20) ? 'header1' : 'header2';
?>
#header {
	background: url(<?php echo $header.'.jpg'; ?>);
}
</style>
Salut,

Heyoan a raison, PHP est plus sûr. Mais si tu y tiens vraiment, en JS ça donnerait ça :
[b]CSS[/b]
#header {background-image: url(header2.jpg);}
.night #header {background-image: url(header1.jpg);}

[b]JS[/b]
var hour = (new Date()).getHours();
if (hour < 8 || hour > 19) {
    document.body.className += ' night';
}
En faite mon fichier header s'appelle banniere et banniere2

voici le CSS 


#head {
  width: 760px;
  height: 140px;
  background-image: url("images/banniere.jpg");
  background-color:#333333;
  background-repeat: no-repeat;
  margin-bottom: 10px; }

Modifié par neo-cortex (21 Jun 2009 - 12:20)
neo-cortex a écrit :
Je doit le mettre dans chaque fichier HTML qui contienne le header ensuite je devrais les renommer .php ?

Euh... l'exemple donné par marcv est en JavaScript, et ne nécessite pas l'utilisation de PHP.

Pour s'avoir comment l'appliquer à ton site, eh bien en ayant deux-trois notions de bases de JavaScript ça devrait marcher. Smiley cligne

Un petit commentaire sur ce qui a été dit précédemment sur l'utilisation de JavaScript: bien entendu, JavaScript peut être désactivé ou indisponible pour diverses raisons. Cependant, s'il s'agit d'un effet cosmétique et pas d'une fonctionnalité à proprement parler du site, alors je ne vois pas d'objection à l'utilisation de JavaScript pour cet effet.

neo-cortex a écrit :
En faite mon fichier header s'appelle banniere et banniere2

D'accord. Mais si tu as compris l'exemple de marcv, tu ne devrais pas avoir de problème pour l'adapter à ton code existant.
a écrit :
Cependant, s'il s'agit d'un effet cosmétique et pas d'une fonctionnalité à proprement parler du site, alors je ne vois pas d'objection à l'utilisation de JavaScript pour cet effet.


Absolument !

Je ne pens pas réussir a l'implenter dans mon code Smiley confus
Dans ta CSS tu as ça (je te cite) :
#head {
  width: 760px;
  height: 140px;
  background-image: url("images/banniere.jpg");
  background-color:#333333;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}
rajoute juste en dessous :
.night #head {
  background-image: url("images/banniere2.jpg");
}
Ensuite, dans le <head> de ton fichier HTML, rajoute :
<script type="text/javascript">
    window.onload = function() {
        var hour = (new Date()).getHours();
        if (hour < 8 || hour > 19) {
            document.body.className += ' night';
        }
    };
</script>
Voilà. Pour rappel, ça ne fonctionnera que dans 90-95% des cas, alors que la solution de Heyoan dans 99% (en supposant --sans conviction-- 1% pour CSS et/ou images off).
Modifié par marcv (21 Jun 2009 - 15:59)
Génial, sa fonctionne !

Et pour la méthode de Heyoan

Je doit m'y prendre comment ?
Modifié par neo-cortex (21 Jun 2009 - 16:04)
Florent V. a écrit :
bien entendu, JavaScript peut être désactivé ou indisponible pour diverses raisons. Cependant, s'il s'agit d'un effet cosmétique et pas d'une fonctionnalité à proprement parler du site, alors je ne vois pas d'objection à l'utilisation de JavaScript pour cet effet.
Je suis d'accord avec toi mais à contrainte égale (ce qui semblait être le cas ici) et même si ça n'est que cosmétique je serais surpris qu'un développeur qui connaisse un langage serveur choisisse JavaScript. Smiley smile

Comme neo-cortex disait connaître un peu je pensais qu'il ne manquait que l'info sur la récupération de l'heure.
Je préfère le mettre en PHP mais j'ai pas envie de mettre renommer tous mes fichier html en .php refaire les liens etc...
Modifié par neo-cortex (21 Jun 2009 - 16:08)
Si tu veux pas renommer tes fichiers, laisse tomber, PHP n'analyse pas les .html (à moins qu'il y ait une bidouille dans la conf pour changer ce comportement, je sais pas)

Sinon, en version simplifiée la méthode de Heyoan :
- même manip sur ta CSS
- puis rajoute ce code PHP dans l'attribut class de ton body :
<body class="<?php if (date(G) < 8 && date(G) > 19) echo(' night'); ?>'>

Modifié par marcv (21 Jun 2009 - 16:13)
neo-cortex a écrit :
Je préfère le mettre en PHP mais j'ai pas envie de mettre renommer tous mes fichier html en .php refaire les liens etc...
Oui c'est ce que je me suis dit en lisant ta réponse... et du coup la contrainte n'est plus la même. Smiley cligne

Sinon pour info tu aurais pu prendre le code de marcv et remplacer <script ...>...</script> par :
<?php
$class_header = (date('G') < 8 || date('G') > 19) ? ' class="night"' : '';
?>
<div id="menu"<?php echo $class_header; ?>>
...
</div>
En supposant que tu n'aies pas déjà une classe de définie sinon il faudrait adapter.


Edit: on s'est croisés ! D'ailleurs je n'avais pas fait gaffe mais tu affectes la classe à BODY donc dans mon cas il faudrait mettre 
#head .night {
  background-image: url("images/banniere2.jpg");
}

Modifié par Heyoan (21 Jun 2009 - 16:22)
Je pense que JS est activé sur tout les navigateur de la plupart des navigateur sur mon site

Et ceux qui désactive JS c'est pour une bonne raison

Donc méthode en PHP ou je peut laisser mes fichier en .html mes fichier c'est impossible donc appart en bidouillant le fichier conf de php ?
neo-cortex a écrit :
Donc méthode en PHP ou je peut laisser mes fichier en .html mes fichier c'est impossible donc appart en bidouillant le fichier conf de php ?
Bof... autant faire ça en JS non ?
Smiley biggol

Ce n'était pas la même question mais tu pourrais jeter un coup d'oeil aux réponses de ce post et des suivants.

Mais pour le coup ça commence à être vraiment lourd pour pas grand chose ! Smiley langue
I know Smiley sweatdrop

Bon ben au pire c'est pas grave ne vous dérangé pas plus pour moi j'utiliserais la méthode JS Smiley cligne
Modifié par neo-cortex (21 Jun 2009 - 16:34)
Pages :
Sujet clos
Aller à