Sustitución de imagenes en la cabecera CSS

Visitando la página
http://www.orangeteam.co.yu/

Me parecio una cosa curiosa es la de cambiar imagenes en la cabecer, cuando entraba en una cualquier sección.

¿Se puede hacer o simular esto en CSS?


En un principio pienso que no, simplemente por la cuestion que CSS no lo admite, o por lo menos hasta donde me llega el conocimiento (soy todavia muy novato en este mundo).

¿Se puede leer un archivo en CSS?

No, la solucion seria Emular las pseudoclases de CSS con Javascript

ya que "podriamos" poner alguna progrmacion para la carga aleatoria de imagenes.

¿Que opinais?

Consiste en una carga aleatoria de imagenes, eso lo haces de una forma muy sencilla desde PHP, le pones un encode al php como imagen jpg o la que desees y luego llamas al php desde la url.

Código :

<img src="random_img.php" alt="Cabecera" width="300" height="50" />

O en css.

Código :

#cabecera { width:300px; height:50px; background:url(random_img.php) no-repeat; }

Gracias Neo.

Pense en hacer eso, pero no sabia si al final me funcionaria.

Estuve probando lo que me dices, pero no me funciona

puede que este haciendo algo mal

HTML

Código :

 <div id="hty"></div>
 

CSS

Código :

 #hty
 {
    width:750px;
    height:50px;
    margin:0 0 10px 0;
    background: url(random.php) no-repeat;
 }

 

y el random.php
PHP

Código :

 $numbanners = 2; //numero de banners que se rotarán $random =
 rand(1,$numbanners);

 $img = array();
 $img[1] = "ima_prt/enca/hdrob1.jpg";
 $img[2] ="ima_prt/enca/hdrob1.jpg";

 echo $img[$random];

 

puedes usar javascript y la funcion random... es sencillo, tambien podrias hacerlo en flash y de la misma manere, la betaja seria que el flash solo lo cargaria una vez y ya, despues lo toma del cache...
primero haces un array que contenga las imagenes, luego metes en una variable el valor resultante de multiplicar random por el numero de imagenes que tengas, y vas a tocar el frame correspondiente, para esto en cada frame hay una imagen distinta, por ejejmplo en el frame uno esta la imagen de un perro y un stop() en el frame 2 la imagen de un gato y un stop,
la instruccion seri un gotoAndStop(frame) es algo sencillo de hacer, si gustas que te pase el codigo dime...

si, se podria hacer en Flash, .... Pero lo que quería es que estuviera en el Codigo CSS

Por eso Neo me dijo una manera

Código :

#cabecera { width:300px; height:50px; background:url(random_img.php) no-repeat; }

Pero claro el problema que tengo "funciona" a medias, por el php no por lo que ha dicho Neo, si por la pagina que me da estos errores

Pero gracias de todos modos

El error dice que tu archivo no existe, lo más seguro es que el .php no está a la altura del .css, corrige las rutas y verás que funciona. Sino será cuestión de probar otras maneras, cuentanos que pasa y podremos seguir dandote alternativas.

hice esta prueba y me funciona perfecto, aunque sin usar css, por si te interesa, me gustaria enrriquecer este codigo. por cierto no entendi eso de: "le pones un encode al php como imagen jpg o la que desees " pero tiene buena pinta me podrian explicar como se hace?

aqui esta mi codigo. Create una imagen 1.jpg y otra 2.jpg y guarda este codigo con nombre img.php

<a href = "img.php?x=1.jpg">link1 </a>
<a href = "img.php?x=2.jpg">link2 </a>

<?

if (isset($_GET['x']))
{
$img=$_GET['x'];
echo "<img align = 'right' src= " . $img . " alt='Cabecera' width='300' height='50' />";
}
?>