18041 sujets

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

Background changant ??

Pages :
Bonjour

Voila je voudrais savoir si il existe un code qui permettrai a mon background de changer en fonction de l heure ou d'un moment de la journée?? ou même de la méteo ? ( j ai un theme dans igoogle qui change en fonction de la méteo ( bus stop )
( ex matin l aube, midi ciel bleu, soir coucher de soleil etc ...)
Merci beaucoup
Salut ,

Je pense que cela peux se faire facilement en php

en gros , tu prévois une feuille de style css qui gère tout ton css sauf le background , et une qui ne fais que le background .

Ensuite tu fais un petit script qui récupère l'heure 


$heure= date('H:i:s');

if($heure>=16)
{
echo "plus de 16heures  : " .heure ;
}
else echo "moins de 16 h : ".heure ;


et la au lieu de faire un affichage de plus ou moins 16h tu n'a plus qu'a mettre tes conditions que tu veux par rapport à l'heure et tu change le css que tu met ( en gros tu aura une feuille de style background_matin background_aprem background_soir par exemple qui sera chargé selon la condition )


edit : hop petit bug a cause du <?php et ?> a la fin .. dans la partie code

Ps : a pas contre , a priori c'est l'heure du serveur .. du coup si ton site a une porté internationale .. ca sera sans doute pas adapté .. ca dois pouvoir se faire coté client aussi , en javascript peut être
Modifié par mathieu1004 (08 Jul 2010 - 16:45)
Salut,

ce serait plutôt quelque chose comme :
echo intval(date('H')) >= 16 ? 'Plus de 16h' : 'Moins de 16h';

<html>
<head>
<script language="JavaScript">
function heure() {
	date = new Date();
	heure = date.getHours();
	if(heure>=16)
	{
	document.bgColor="red";
	}
	else
	{
	document.bgColor="Yellow";
	}
}

</script>
</head>
<body onload="heure()">
blabla
</body>


hop pour si tu préfère en javascript , c'est apriori exécuté en local , donc a l'heure du pc de la personne Smiley smile
hooo cool super Smiley lol merci
j'avoue avoir du mal avec javascript et php
mille merci pour votre aide ^^ je vais essayer des que possible
@ heyoan : En effet il faut mettre un >= pour le test j'ai remarqué que après coup xD

J'ai préféré une structure en if else , pour qu'il puisse l'adapté facilement a mettre d'autre conditions en suivant ( plus que 2 cas quoi ) , et il aurait été plus propre des { } au else ( je vais les rajoutés d'ailleurs xD

ensuite j'ai pas casté en int a cause du typage faible .. mais en effet c'est sans doute plus propre , ou de comparé la date avec une chaine plutôt qu'un int comme j'ai mis

Pour H:i:s j'ai mis les trois pour avoir l'heure minute seconde , mais sans doute inutile , et en effet , juste l'heure dois suffire .
wow j'ai pas tout suivit :s
pourrais tu me mettre un exemple step ( j'ai vraiment bocoup de mal en programmation -_- ')
? qu'est ce que tu n'a pas compris ?
ce que je disais a heyoan ?

en gros dans le 1er exemple en php , je compare un string et un entier , ce qui n'est pas forcement tres prudent , il vaudrait mieu faire soit comme il l'a marqué avec
intval(date('H')) >= 16 pour dire que l'on transforme le retour de date('H') qui est un string en entier et qu on le compare à l'entier 16
soit date('H') >="16" pour faire de la comparaison de string , mais pour bon c plus logique de comparé des entiers que des strings dans le cas present ... donc la 1er solution avec le intval ( on peux faire des opérations sur les entiers ( additions par exemple pour gérer l'heure d'été ou d'hiver je sais pas je dis ca au pif .. ) )

ensuite j avais mis date('H:i:s') mais tu n'a sans doute besoin que de l'heure par des minutes et des secondes ... du coup en effet date('H') est suffisant dans ton cas a priori

et j'ai préféré une structure if else qui est plus facile a adapté pour faire plus que 2 cas que ca solution avec le ? pour faire le if else


en gros une solution plus propre ( meme si ca fonctionnais des le debut ) serait 


// on ne stock pas l'heure dans une variable car on ne s'en sert pas 
if(intval(date('H'))>=16) // on caste le string retourné par date() en entier pour le comparé a un entier 
{ 
echo "plus de 16heures " ; // on n'affiche pas l'heure courante .. ca avais pas d'interet ^^ 
} 
else echo "moins de 16 h ";  // ici non plus


et donc a la place de faire un echo plus ou moins de 16 h tu fera un echo du css que tu a besoin selon l'heure
j ai mis en commentaire ce qui change
Modifié par mathieu1004 (08 Jul 2010 - 16:59)
mathieu1004 a écrit :
en gros une solution plus propre ( meme si ca fonctionnais des le debut ) serait
En fait ça ne pouvait pas fonctionner dès le début puisque date('H:i:s') renvoie forcément un string qu'il est ensuite impossible de comparer à 16. Et pour chipoter il manquait le $ avant heure. Smiley cligne

Pour ta solution en JavaScript je verrais plutôt :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
function heure() {
	if(new Date().getHours() >= 16) {
		couleur = "red";
    } else { 
		couleur = "yellow";
    }
	document.getElementById("mon_paragraphe").style.backgroundColor = couleur;
} 
window.onload=heure;
</script> 
</head> 
<body>
<p id="mon_paragraphe">blabla </p>
</body> 
</html>
car language="JavaScript" et bgColor sont obsolètes. De plus on peut avoir des conflits avec le onload sur le body : cf. Gestion des évènements.
hop , pour la version en javascript , javais mis rapidement le background en red yellow ^^

donc bon voici pour changé l'image de fond par rapport a l'heure : 
<html>
<head>
<script type="text/javascript"> 
function heure() {
	date = new Date();
	heure = date.getHours();
	if(heure>=16)
	{
	//document.bgColor="red";
	document.body.style.backgroundImage ="url('./images/image1.jpg')";
	}
	else
	{
	//document.bgColor="Yellow";
	document.body.style.backgroundImage ="url('./images/image2.jpg')";
	}
}

</script>
</head>
<body onload="heure()">
blabla
</body>
</html>

en supposant que les images sont stockés dans un fichier images au niveau de la page , et ou les noms des images sont image1.jpg et image2.jpg

Edit :
@heyoan ouais language="JavaScript" je savais mais je met le met encore .. et bgcolor je j'avais fais ca rapidement en attendant de voir exactement pour le changement du background pour le body .

Par contre pour le body onload je savais pas je vais regardé ca de suite Smiley langue

edit 2 :
@heyoan ah j'ai du supprimé le $ qui manqué en même temps que <?php et ?> a la fin car sinon ca n'avais rien affiché :s
mais sinon ca marché des le début je l'avais testé avant de le mettre ^^
Modifié par mathieu1004 (08 Jul 2010 - 17:37)
ton code fonctionne nickel mais j'ai encore une petite question
voila en faites mon bg c'est une image qui se positionne au dessus, et une autre en dessous plus un background color au milieu
comment puis je positionner mon background en bas dans le code ?
hum ? tu a utilisé quel code enfaite ? php ou javascript xD ?

tu veux avoir une image de fond , un trait de couleur et dessous une autre image de fond ?

je dirai que soit il faut que tu crée l'image que tu va plaqué en fond directement avec les 3 trucs que tu veux , comme ca tu n'auras toujours que une image mais ca va peut être être pénible a faire si tu dois en faire plusieurs pour que cela change avec l'heure ..

sinon euh peut être en créant 3 divs qui feront toute la page et en jouant sur le background de chaque div , mais ca risque d'être très pénible pour écrire ta page .. ( sauf dans l'éventualité ou il y a un rapport entre tes background séparé par un trait au milieu et le code que tu vas écrire )

sinon je sais pas j'avoue que je vois pas une solution idéale pour faire ca
en faites le design est deja cree,
c'est juste le changement qui me posais souci
alors j ai utiliser le dernier code donc javascript
en faites j ai une image, une couleur ( pas une image, un background color ) et une image
la premiere et la couleure c ok c'est juste celle du fond, je sais pas comment mettre dans le javascript qu elle dois se mettre en bas
je sais pas si c'est comprehensible :s
hum ca serait peut etre plus comprehensible si tu pouvais nous montré le site qu'on puisse mieux voir ce que tu veux exactement ^^ et comment ca marche en ce moment Smiley smile
bon ba je pense que cela dois être quelque chose du genre : 

if(test sur ton heure) 
{
document.getElementById("bottom").style.backgroundImage ="url('images/footer.png') no-repeat bottom center"; 
}
else
{
document.getElementById("bottom").style.backgroundImage ="url('images/footer2.png') no-repeat bottom center"; 
}

Modifié par mathieu1004 (08 Jul 2010 - 21:54)
le truc que je ne comprend pas c'est que ca fonctionne pas donc j'ai crée un fichier vierge pour mes test et il ne m'affiche même pas les images -_- alors que les liens sont bon etc ( j ai mis mes image dans le meme dossier pour le test )
Pages :
Sujet clos
Aller à