Assombrir fond de la page selon l'heure

[Chamyky]

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]

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 ).

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]

...Fais-en l'usage que tu veux (du moment que ce n'est pas illicite )...

Mince, alors c'est raté pour The Pirate Bay 2 !

...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 ) !

 

[Laurent_h]

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]

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]

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]

mais quand tu assombris ton fond de page, en même temps il faut éclaircir les textes sinon on y voit plus rien non ?

 

[Chamyky]

mais quand tu assombris ton fond de page, en même temps il faut éclaircir les textes sinon on y voit plus rien non ?

Non, tous mes textes sont blancs, dans des cadres noirs.

Mais, pour le DIV donc ? Va-t-il uniquement affecter mon image de fond ?

 

[p4bl0]

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]

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 !

(moi, fainéant :o :mad: ?)

 

[Laurent_h]

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]

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]

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

 

[Anonyme]

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]

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]

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

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]

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 !

...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 ), 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 )

 

[Anonyme]

Oui bien sûr ! Mais je suis curieux quand même... je vais pas rester ignorant du CSS toute ma vie quand même !

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]

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]

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