Diferente fondo según la hora del día
25 Junio, 2006 por CarlosEn la nueva web de neurotic el fondo cambia según la hora del día que sea (día, noche y amanecer/anochecer). A continuación explicaré como lo hicimos:
- Dibujar las diferentes imágenes. En nuestro caso hemos creado tres imágenes: el fondo de día, de noche y amanecer/día.
- Crear el script que según la hora incluirá la imagen adecuada. El nuestro es el siguiente:
<?php
// Rotador de imagenes
$path = "/path/al/directorio/de/imagenes";if(is_dir($path))
{
// Calculamos la hora. Suma o resta según la hora que quieres tener como referencia
$hora = date("G");
//echo "<p>Son las $hora</p>";// Imagen por defecto
$imagen = "fondo_body1.jpg";// Amanecer
if($hora >= 6 AND $hora < 8)
$imagen = "fondo_body2.jpg";// Día
if($hora >= 8 AND $hora < 20)
$imagen = "fondo_body1.jpg";// Anochecer
if($hora >= 20 AND $hora < 21)
$imagen = "fondo_body2.jpg";// Noche
if($hora >= 21 OR $hora < 6)
$imagen = "fondo_body3.jpg";// Ponemos el tipo correcto
header("Content-Type: image/jpeg");
header("Expires: ".gmdate("D, d M Y H:i:s",time()));// incluimos la imagen
if(is_file($path . "/$imagen"))
{
readfile($path . "/$imagen");
//echo "<p>Incluimos $path/$imagen";
}
}
?>Guardalo con el nombre que quieras (pero con extensión php). Por ejemplo fondo.php.
- Para hacerlo más elegante y no poner un php directamente en el CSS (que tampoco pasaría nada) creamos una regla para el mod_rewrite:
RewriteEngine on
RewriteRule ^path/reescrito/fondo_cielo.jpg$ /path/a/fondo.php [L] - Y finalmente establecemos la imagen de background en el CSS:
div#que_tiene_el_fondo {
background: url(/path/reescrito/fondo_cielo.jpg) repeat-x left top;
}
El mismo sistema se puede hacer servir para mostrar una cabecera aleatoria o un fondo distinto según la época del año o si hace sol o está lloviendo (esto último es lo que quiero hacer si pudiese saber el tiempo de Les Franqueses del Vallés)
Junio 5th, 2007 at 6:08 am
me intereso mucho su sistema pero yo quiero hacerlo por dias… lunes un color. martes otro y asi sucesivamente.
El problema es que necesito ayuda y les pediria si se pueden contactar con migo a mi mail. eze.c_03@rpmotors.com.ar o eze.c_03@hotmai.com
Muchas gracias y espero su pronta respuesta.. sigan asi muy buen post
Enero 20th, 2008 at 3:26 pm
Hola, no me funciona este ejemplo… Me lo podríais pasar? carles90@hotmail.com
Enero 21st, 2008 at 1:54 pm
Hola Carles, el ejemplo que te podría pasar es el mismo que he puesto aquí.
Marzo 11th, 2009 at 1:55 am
Hola, esto era lo que buscaba, al parecer, no hay mucho por Internet acerca de esto y veo que es algo guapo para las Web’s he aquí mi duda.
No utilizo CSS para mi Web, solo HTML como podría implementarlo sin tener un fichero CSS? muchas gracias y enhorabuena.
Junio 28th, 2009 at 11:30 pm
@KellerNET
en caso de que el fondo este en tu body, lo pondrias como style
Asi emulas tener un CSS cuando en realidad lo aplicas dentro de la etiqueta, otra forma de tener fondo aleatorio (dependiendo al cliente) es usando AJAX; javascript lee la hora en la maquina cliente y dependiendo a la hora hace un request, el server le responde con una imagen (dia, noche, tarde, madrugada)