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