• Bonjour Visiteur. Bienvenue sur les nouveaux forums de MacGeneration. La peinture est encore fraiche, quelques boulons doivent être resserrés, plus d’informations demain !

Assombrir fond de la page selon l'heure

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Bonjour !

J'aimerais pouvoir assombrir l'image de fond de ma page Web selon l'heure...
Le problème est surtout l'affichage : est-il possible de superposer une image transparente à celle du fond, qui remplirait toute la page, mais surtout qui puisse être générée par PHP ?
Il me semble qu'il est possible de manipuler des images avec PHP, mais pour une transparence progressive, il me faudrait utiliser du PNG... et je ne suis pas sûr que PHP sache traiter ce format.
De plus, je ne sais pas non plus comment je pourrais étirer cette image pour qu'elle remplisse intégralement la page...

Mais, j'ai quand même une piste : mon image est d'une simplicité extrême :

Une fois bouclée, elle ressemble à une grille blanche tracée sur une feuille bleue (genre dessin technique... j'aurais aimé que la grille ne soit pas parallèle aux bords, mais sinon c'était impossible à boucler :sick:).
Étant donné qu'elle est simple, peut-être serait-il possible à PHP d'assombrir lui-même l'image, avant de l'envoyer au navigateur ?

Merci d'avance pour vos réponses :) !
 

PA5CAL

Vétéran
Club MacG
21 Juillet 2005
9 228
596
Île-de-France
Bonsoir

Pour ce qui est d'avoir un quadrillage non parallèle aux bords, c'est tout-à-fait possible. Je t'en donne un en pièce jointe. Fais-en l'usage que tu veux (du moment que ce n'est pas illicite :D ).

Pour assombrir l'image, je pense que le plus simple est encore d'avoir plusieurs copies de cette image enregistrées avec des luminositées différentes, puis d'employer l'une d'entre elles comme image de fond en fonction de l'heure.
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
...Fais-en l'usage que tu veux (du moment que ce n'est pas illicite :D )...
Mince, alors c'est raté pour The Pirate Bay 2 :D !

...Pour assombrir l'image, je pense que le plus simple est encore d'avoir plusieurs copies de cette image enregistrées avec des luminositées différentes, puis d'employer l'une d'entre elles comme image de fond en fonction de l'heure.
C'est bien, mais j'utiliserais cette solution en dernier recours : je préférerais quelque chose de plus optimisé, et surtout de plus précis...
Mais c'est vrai que ça convient très bien !

Edit : Arg, franchement je sais pas ce que je veux... finalement, je trouve que une grille parallèle va mieux avec l'aspect "régulier" de ma page... désolé si ça a été dur à faire (même si j'ai l'impression que tu as fait ça en un tournemain :p) !
 

Laurent_h

Membre d’élite
Club MacG
25 Juillet 2005
1 058
50
Paris
Bonsoir


Pour assombrir l'image, je pense que le plus simple est encore d'avoir plusieurs copies de cette image enregistrées avec des luminositées différentes, puis d'employer l'une d'entre elles comme image de fond en fonction de l'heure.
Le plus simple, à mon avis, c'est un script javascritp/Ajax, qui te permet de créer un DIV couleur noire par dessus ta page en permanence (opacité 0%) et tu changes le niveau d'opacité à chaque heure par exemple, mais tout ça sur le poste client et non pas serveur.
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Le plus simple, à mon avis, c'est un script javascritp/Ajax, qui te permet de créer un DIV couleur noire par dessus ta page en permanence (opacité 0%) et tu changes le niveau d'opacité à chaque heure par exemple, mais tout ça sur le poste client et non pas serveur.
Eh bien, que ce soit sur le poste client est d'un côté satisfaisant, puisque même si la page reste ouverte sans rechargement, je peux la faire s'auto-assombrir/éclaircir régulièrement...
Mais, je peux aussi faire ça de côté serveur, non ? Dans le code de la page, je remplace simplement le pourcentage d'opacité du DIV par un code PHP qui donne la bonne valeur.
(hum, je ne connais pas vraiment le CSS, alors peut-être n'est-ce pas possible en pratique ?)

Mais, est-ce que ce DIV va s'intercaler entre le contenu de ma page et le fond, ou tout assombrir ?
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
30
$PWD
p4bl0.net
Eh bien, que ce soit sur le poste client est d'un côté satisfaisant, puisque même si la page reste ouverte sans rechargement, je peux la faire s'auto-assombrir/éclaircir régulièrement...
Mais, je peux aussi faire ça de côté serveur, non ? Dans le code de la page, je remplace simplement le pourcentage d'opacité du DIV par un code PHP qui donne la bonne valeur.
(hum, je ne connais pas vraiment le CSS, alors peut-être n'est-ce pas possible en pratique ?)

Mais, est-ce que ce DIV va s'intercaler entre le contenu de ma page et le fond, ou tout assombrir ?
Le plus simple et le plus optimisé serait quand même d'avoir plusieur version de l'image que l'on utilise en background en fonction de l'heure de la journée.
 

obi wan

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
mais quand tu assombris ton fond de page, en même temps il faut éclaircir les textes sinon on y voit plus rien non ?
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
30
$PWD
p4bl0.net
Non, tous mes textes sont blancs, dans des cadres noirs.

Mais, pour le DIV donc ? Va-t-il uniquement affecter mon image de fond ?
tu te complique la vie, non seuelement à toi mais aussi à ton serveur alors qu'il est ridiculement simple de faire un test sur date('H') et d'afficher en fonction une image ou une autre en fond.


Le faire autrement me parait ridicule et bêtement compliqué dans ce contexte là. La méthode que je propose ne demande pas de javascript ou de png transparent qui ne marche pas chez tout le monde.
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Bon, bon, je vais faire ça alors.

En fait, la raison pour laquelle ça me rebutait, c'est que j'avais envie de pouvoir changer facilement l'image de fond... mais, tant pis, ce n'est pas grave.

Je vais juste devoir trouver une façon automatisée de générer 24 images au contraste différent :D !

(moi, fainéant :eek: :mad: :D ?)
 

Laurent_h

Membre d’élite
Club MacG
25 Juillet 2005
1 058
50
Paris
Non, tous mes textes sont blancs, dans des cadres noirs.

Mais, pour le DIV donc ? Va-t-il uniquement affecter mon image de fond ?
Il te suffit pour ça de mettre un attribut css "z-index: 0" pour le DIV avec ton image de fond et "z-index: 1" pour le DIV assombrissant, et rajouter un DIV qui contient le reste de ton site avec "z-index: 10".

ça devrait suffire
 

PA5CAL

Vétéran
Club MacG
21 Juillet 2005
9 228
596
Île-de-France
J'ouvre une parenthèse.

Pour m'amuser, j'ai fait un petit script pour calculer la luminosité à appliquer en fonction de l'heure, de manière à ce que ça reflète à peu près ce qui se passe dans le ciel de l'utilisateur.

J'ai donc un algo qui donne la position du soleil dans le ciel (ainsi que les heures de lever et coucher) en fonction notamment de la date, de l'heure locale et de l'heure universelle (j'en déduis le fuseau horaire et la correction été/hiver à apporter).

Mais je bute sur un gros problème: la latitude intervient, et de façon importante. Quelqu'un aurait-il une idée sur le moyen de l'obtenir, même de manière approchée ? J'avais pensé à passer par un "IP to Country", mais ça me paraît assez lourd à mettre en oeuvre...
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Il te suffit pour ça de mettre un attribut css "z-index: 0" pour le DIV avec ton image de fond et "z-index: 1" pour le DIV assombrissant, et rajouter un DIV qui contient le reste de ton site avec "z-index: 10".

ça devrait suffire
D'accord, je vais regarder par rapport à ça.

Première étape : qu'est-ce qu'un DIV :D :rateau: !

(heureusement qu'il y a Google :love: )

...Quelqu'un aurait-il une idée sur le moyen de l'obtenir, même de manière approchée ? J'avais pensé à passer par un "IP to Country", mais ça me paraît assez lourd à mettre en oeuvre...
L'"IP to Country" est probablement la seule solution... la seule raison pour laquelle on a la longitude, est parce qu'elle correspond au fuseau horaire.
C'est plutôt gênant cette histoire :sick: !
 
A

Anonyme

Invité
Heu, je dis ça comme ça mais la solution de p4bl0 est 100 fois plus facile à mettre en œuvre que des superpositions de DIV. ;)
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
30
$PWD
p4bl0.net
Heu, je dis ça comme ça mais la solution de p4bl0 est 100 fois plus facile à mettre en œuvre que des superpositions de DIV. ;)
:) :)



Pour les différentes images nécessaires, c'est facilement faisable avec LiveQuartz. Il suffit d'enregistrer au format .rhif les images (en plus du format png qui sera utilisé sur le web) pour pouvoir facielement changer l'image de fond que l'on assombrie.
 

obi wan

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
Je vais juste devoir trouver une façon automatisée de générer 24 images au contraste différent :D !
Python + Python Image Library (PIL) te permet de manipuler les images, ou encore php et java etc... bref les langages permettant de manipuler des images sont légion ;)
Ceci dit faire 24 images à la main c'est pas méchant tout de même.
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Heu, je dis ça comme ça mais la solution de p4bl0 est 100 fois plus facile à mettre en œuvre que des superpositions de DIV. ;)
Oui bien sûr ! Mais je suis curieux quand même... je vais pas rester ignorant du CSS toute ma vie quand même :D !

...Il suffit d'enregistrer au format .rhif les images (en plus du format png qui sera utilisé sur le web) pour pouvoir facielement changer l'image de fond que l'on assombrie.
Eh bien, déjà à l'origine les images sont créées dans Flash (le seul logiciel de dessin vectoriel potable que j'ai, version 6 s'il vous plaît :D), et l'assombrissement était réalisé par un calque noir transparent.

...bref les langages permettant de manipuler des images sont légion ;)...
Le seul que je connais de ceux-là est PHP, et je ne connais rien de ses commandes de traitement d'image. Mais, j'ai déjà un peu cherché, ça n'a pas l'air si dur.
Et d'ailleurs, si je le fait en PHP, je n'aurais plus aucune raison de ne pas faire une création d'image à la volée :hein: !

...Ceci dit faire 24 images à la main c'est pas méchant tout de même.
Ouip, mais c'est toujours plus intéressant de faire un code qui le fait tout seul.

(et moins ennuyant aussi :D)
 
A

Anonyme

Invité
Oui bien sûr ! Mais je suis curieux quand même... je vais pas rester ignorant du CSS toute ma vie quand même :D !
Certes, mais les superpositions de div en jouant sur les z-index c'est pas vraiment le truc à essayer quand on débute. Même les pros évitent au maximum d'utiliser ce système (prise de tête assurée). ;)
 

Chamyky

Membre d’élite
Club MacG
11 Mars 2005
1 274
39
27
ehv.monespace.net
Certes, mais les superpositions de div en jouant sur les z-index c'est pas vraiment le truc à essayer quand on débute. Même les pros évitent au maximum d'utiliser ce système (prise de tête assurée). ;)
Ha !


Oh, et, pour les images de luminosité différente... il y a une solution simple, rapide, qui ne nécessite même pas de coder : avec Flash, je fais une animation mettant en scène une interpolation du clair au sombre, et je l'exporte en GIF animé, que je n'ai plus qu'à éclater en suite d'images.

Si c'est pas beau la vie :love: !
 

Laurent_h

Membre d’élite
Club MacG
25 Juillet 2005
1 058
50
Paris
Certes, mais les superpositions de div en jouant sur les z-index c'est pas vraiment le truc à essayer quand on débute. Même les pros évitent au maximum d'utiliser ce système (prise de tête assurée). ;)
Essaies avec quelque chose comme ça (à optimiser en fonction de tes besoins):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<div id="ton_image_de_fond" style="background-image: url(ton_url_image_de_fond.png); z-index:0">
<div id="ton_calque_opacifiant" style="z-index:1; filter: "alpha(opacity=ta_variable_opacite_type_45_pour45&#37;)"; -Moz-Opacity: "ta_variable_opacite_type_.45_pour45%"; background-color: #000">
<div id="ton_site" style="z-index: 10;">


ICI TON SITE ENTIER

</div>
</div>
</div>"


</body>
</html>

Mais effectivement, &#231;a risque d'&#234;tre la TRES grosse prise de t&#234;te