Ayer me amanecí y no lo resuelvo

ArielCristian · #1 (**permalink**) 07/08/2007, 13:08

Intento poner en mi blog un fondo aleatorio en la tabla del encabezado. Estoy rompiendome la cabeza con un código y siento que estoy muy cerca de lograrlo, pero NO encuentro solución.

Pongo esto en <head>

Código PHP:

  <script type="text/javascript" language="javascript"> 
<!-- 
//numero de imagenes de fondo disponibles 
var numImagenes = 2 
//nombre de las imagenes = prefijoNombre + numero de 1 a numImagenes + extension 
var prefijoNombre = 'http://arielcristian.wordpress.com/files/2007/08/cabecera-' 
//extension de las imagenes 
var extension = '.jpg' 
 
function EscribeBody() { 
   var imagenes = new Array( numImagenes ) 
   for ( contador = 1; contador <= numImagenes; contador++ ) 
      imagenes[ contador ] = prefijoNombre + contador + extension 
 
   var aleatorio = Math.round( (numImagenes - 1) * Math.random() ) + 1 
 
   document.write( imagenes[ aleatorio ] ) 
} 
//--> 
</script>

Ahora, este es el CSS que permite poner una imagen de fondo en la tabla que quiero:

Código PHP:

  #header-wrapper { 
    margin: 0;  
    width: 800px;  
    background: #036EB4 url(http://arielcristian.wordpress.com/files/2007/08/cabecera-1) no-repeat center top;   
    height: 149px;  
    color: #FFF  
}

En "url()" he intentado poner mi código JS de todas las formas que se me ocurren:

Código PHP:

  url(javascript:Escribe();) 
url(javascript:(Escribe());) 
url(javascript:Escribe) 
url('javascript:'Escribe()';')

Y muchas más, he pasado de lo lógico hasta a lo fantasioso -pero valía la pena intentar- y no encuentro solución alguna. Sé que no soy un experto ni mucho menos, apuesto a que algunos se rien de mi problema. Solo espero puedan ayudarme los expertos habitantes de esta web que ya una vez hace muchos años me han salvado de un enredo php'ciano.

PD: Aunque nunca trate directamente con Cluster, es una pena ver que se ha retirado del foro. ¡Era un maestro!

MaBoRaK · #2 (**permalink**) 07/08/2007, 13:45

loading................

Y nunca te funcionará porque un CSS no puede interpretar Javascript.

Lo que puedes hacer es.

Código PHP:

  function EscribeBody() {
   var imagenes = new Array( numImagenes )
   for ( contador = 1; contador <= numImagenes; contador++ )
      imagenes[ contador ] = prefijoNombre + contador + extension

   var aleatorio = Math.round( (numImagenes - 1) * Math.random() ) + 1

   return imagenes[ aleatorio ] ;
}

Código PHP:

  window.onload=function()
{
  document.body.style.background=" #036EB4 url("+EscribeBody()+") no-repeat center top";
}

connection closed.

ArielCristian · #3 (**permalink**) 07/08/2007, 14:02

No funciona ;(

Encontre esta página de Javascript en CSS:

http://www.quirksmode.org/css/javascript.html

Pero por más que busco y rebusco no hallo solución. He intentado de dos formas lo que me has propuesto.

Código PHP:

  #header-wrapper { 
    margin: 0;  
    width: 800px;  
<script type="text/javascript" language="javascript"> 
<!-- 
window.onload=function() 
{ 
  document.body.style.background=" #036EB4 url("+EscribeBody()+") no-repeat center top"; 
}   
</script> 
    height: 149px;  
    color: #FFF ; 
}

Código PHP:

  #header-wrapper { 
    margin: 0;  
    width: 800px;  
window.onload=function() 
{ 
  document.body.style.background=" #036EB4 url("+EscribeBody()+") no-repeat center top"; 
}   
    height: 149px;  
    color: #FFF ; 
}

No resulta, pero muchas gracias, de veras.

derkenuke · #4 (**permalink**) 07/08/2007, 17:01

¿estás metiendo la etiqueta <script> entre las dos etiquetas <style>?

Eso no se puede hacer, mejor haz:

Código PHP:

  <style type="text/css">
...
</style>
<script type="text/javascript">
...
</script>

Y comprueba que la función EscribeBody() te devuelve un String con una url válida para la imágen que quieres colocar (con un alert() por ejemplo).
Si todo está bien al parecer, podrías probar a cambiar la propiedad background-image sólo:
document.body.style.backgroundImage = "url(...)";

Un saludo.

ArielCristian · #5 (**permalink**) 07/08/2007, 18:06

EA!! GRACIAS, bueno aunque falta algo, ya es un paso =)

Código PHP:

  <script type="text/javascript" language="javascript">  
<!-- 
window.onload=function() 
{ 
  document.body.style.backgroundImage="url("+EscribeBody()+")"; 
}   
//-->  
</script>

Eso es lo que he puesto (dentro de <head> claro) y cambia aleatoriamente la imagen de fondo de mi BODY. Ahora el punto es que yo no quiero que cambie el estilo del body, sino de una tabla que es mi encabezado. Este es su style:

Código PHP:

  #header-wrapper { 
    margin: 0;  
    width: 800px;  
    background: #036EB4 url(http://arielcristian.wordpress.com/files/2007/08/cabecera-2.jpg) no-repeat center top;   
    height: 149px;  
    color: #FFF  
}

¿Como lo hago?

Gracias, Gracias

derkenuke · #6 (**permalink**) 07/08/2007, 18:24

Bueno, sería

Código PHP:

  document.getElementById("header-wrapper").style.backgroundImage = "url(...)";

Por cierto, es mejor que elimines el atributo language de la etiqueta <script>.

Un saludo.

ArielCristian · #7 (**permalink**) 07/08/2007, 18:37

GRACIAS MIL!!

Es el resultado que he buscado =)

Ariel Cristian
http://arielcris.blogspot.com