El blog de Neurotic

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:

1. Dibujar las diferentes imágenes. En nuestro caso hemos creado tres imágenes: el fondo de día, de noche y amanecer/día.
2. 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.

3. 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]

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

Esta entrada fue escrita en Domingo, 25 Junio, 2006 a las 10:01 pm y está archivada dentro de General. Puedes seguir las respuestas a través del feed RSS 2.0. Puedes responder, o hacer un trackback desde tu propia página web.