Fondo aleatorio del div

SeaPirates · #1 (**permalink**) 04/08/2009, 08:20

Hola tengo este código:

Código PHP:

        <DIV id=box-lateral> 
      <DIV id=top></DIV> 
      <DIV  
      style="BACKGROUND-IMAGE: url(http://images.habbos.es/websystem/release_6/box-register/156.gif); BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; WIDTH: 208px; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; HEIGHT: 175px; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid; PADDING-TOP: 5px"  
      id=middle> 
      <DIV id=enter><A class=button  
      href="index.php?s=register"><B><SPAN>Regístrate <IMG  
      src="http://images.habbos.es/websystem/release_6/flashy_arrow.gif"></SPAN></B><I></I></A>  
      </DIV></DIV> 
      <DIV id=bottom></DIV></DIV>

Quería saber como puedo hacer para que cada vez que entres a la página cargue una imagen diferente en el fondo de ese div.

djaevi · #2 (**permalink**) 04/08/2009, 11:05

Proba asi

la idea es crear un array con rutas de imagenes y que cargue aleatoriamente uno al ingresar a la pagina

Código javascript:

Ver originalwindow.onload=function() {
var elDiv = document.getElementById('imgContainer');
var losFondos = new Array('imagen1.jpg','lafoto.jpg','rutaimagen.jpg','fotonro2.jpg');
var indice = Math.floor(Math.random()*losFondos.length);
alert(indice);
elDiv.style.backgroundImage = 'url("img/'+ losFondos [indice] +'")';
}

Código HTML:

<div id="imgContainer">
</div>

Saludos

SeaPirates · #3 (**permalink**) 05/08/2009, 04:38

Seria asi?

Código PHP:

     <script> 
     window.onload=function() {var elDiv = document.getElementById('imgContainer');var losFondos = new Array('imagen1.jpg','lafoto.jpg','rutaimagen.jpg','fotonro2.jpg');var indice = Math.floor(Math.random()*losFondos.length);alert(indice);elDiv.style.backgroundImage = 'url("img/'+ losFondos [indice] +'")';} 
     </script> 
      
        <DIV id=box-lateral>  
      <DIV id=top></DIV>  
      <DIV id="imgContainer" 
      style="BACKGROUND-IMAGE: url(http://images.habbos.es/websystem/release_6/box-register/156.gif); BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; WIDTH: 208px; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; HEIGHT: 175px; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid; PADDING-TOP: 5px"  >  
      <DIV id=enter><A class=button   
      href="index.php?s=register"><B><SPAN>Regístrate <IMG   
      src="http://images.habbos.es/websystem/release_6/flashy_arrow.gif"></SPAN></B><I></I></A>   
      </DIV></DIV>  
      <DIV id=bottom></DIV></DIV>

No canvia de imagen..

djaevi · #4 (**permalink**) 05/08/2009, 05:56

pero en el array vos tenes que poner la ruta a tus imagenes yo esos nombres te los puse de ejemplo reemplaza por los links a tus imagenes...

SeaPirates · #5 (**permalink**) 05/08/2009, 08:06

me sigue sin funcionar..

Código PHP:

   <script>  
     window.onload=function() {var elDiv = document.getElementById('imgContainer');var losFondos = new Array('http://www.google.es/images?q=tbn:DZYW1mMFrUXUAM::blog.plozano.net/wp-content/uploads/2008/05/fondos_mayo.jpg','http://www.google.es/images?q=tbn:y3s1SEvsLf2ZIM::i184.photobucket.com/albums/x79/pixvirtual/fc/109/fondos_3d_eFoY8.jpg','http://www.google.es/images?q=tbn:sRIqhc_esi_nZM::photofiltrecastellano.iespana.es/fondos.jpg','http://www.google.es/images?q=tbn:qMh1ZgWUuDVhDM::www.fondosmyspace.com/completos/fondos/1700.jpg');var indice = Math.floor(Math.random()*losFondos.length);alert(indice);elDiv.style.backgroundImage = 'url("img/'+ losFondos [indice] +'")';}  
     </script>  
       
        <DIV id=box-lateral>   
      <DIV id=top></DIV>   
      <DIV id=imgContainer  
      style="BACKGROUND-IMAGE: url(http://images.habbos.es/websystem/release_6/box-register/156.gif); BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; WIDTH: 208px; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; HEIGHT: 175px; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid; PADDING-TOP: 5px"  >   
      <DIV id=enter><A class=button    
      href="index.php?s=register"><B><SPAN>Regístrate <IMG    
      src="http://images.habbos.es/websystem/release_6/flashy_arrow.gif"></SPAN></B><I></I></A>    
      </DIV></DIV>   
      <DIV id=bottom></DIV></DIV>

Edito:

Se me ha ocurrido esto:

<script type="text/javascript">
var MAX = 10;
var num_aleatorio = Math.round(Math.random()*(MAX));
document.write(num_aleatorio);
</script>

Mostrar cada vez 1 numero pero no se como mostrar ese numero entre la url

style="BACKGROUND-IMAGE: url(http://images.habbos.es/websystem/re...leatorio.gif);

com o se podria hacer para que el numero aleatorio aparezca entre la url y el gif?

David · #6 (**permalink**) 05/08/2009, 08:51

Estimado SeaPirates.

Debes leer y tratar de entender el código que te proporcionan en lugar de limitarte a copiar y pegarlo como tal.

Fíjate que esta línea:

Código Javascript:

Ver originalelDiv.style.backgroundImage = 'url("img/'+ losFondos [indice] +'")';

En cualquiera de los casos de los índices del array, el string resultante sería:
"url(img/http://.../)"
Lo cual, lógicamente, es incorrecto. Por lo que debería ser:

Código Javascript:

Ver originalelDiv.style.backgroundImage = 'url(' + losFondos [indice] +')';

SeaPirates · #7 (**permalink**) 05/08/2009, 09:00

vale, muchas gracias! El problema ahora es que hay 150 imagenes para mostrar, y no puedo poner la url de las 150, que se peue hacer?

djaevi · #8 (**permalink**) 05/08/2009, 09:05

claro me olvide de decirte en mi ejemplo que el img/ hace referencia a una supuesta carpeta donde estan las imagenes, respecto a lo otro de las 150 imagenes no veo otra solucion mas que hacer un array con las 150 rutas, si queres para hacer mas prolijo el codigo podrias ponerlo en un archivo.js externo....

Salu2

SeaPirates · #9 (**permalink**) 05/08/2009, 09:14

Vale, como pongo para usar desde u n archivo js?

Y que devo poner dentro? Ponmme un ejemplo,
no se nada de javascript..

Edito:
No abría un modo de poner una sola url, pero que el nombre de la imagen sea /numero.gif?

Cada vez que actualizas hay un numero, tengo 150 imagenes que se llaman: 1.gif,2.gif etc asi que si uviese algñun modo de mostrar un número sería mas facil

djaevi · #10 (**permalink**) 05/08/2009, 09:20

Vas al dreamweaver y poner archivo nuevo, javascript en este archivo podes poner el array por ej...

Código javascript:

Ver originalvar losFondos = new Array();
losFondos[0] = 'imagen1.jpg';
losFondos[1] = 'imagen2.jpg';
 
// imagen1 o imagen2.jpg son ejemplos debes colocar tus rutas a tus imagenes...

y en el archivo principal donde tienes el html y el resto del codigo pones...

Código HTML:

<script src="miArchivo.js"></script>

miArchivo.js es el nombre de archivo que llamo en tu caso deberas buscar el nombre de archivo que vos crees y en la carpeta donde vos lo pongas...

Saludos

SeaPirates · #11 (**permalink**) 05/08/2009, 09:28

Vale, pero del script:

Código PHP:

   <script>   
     window.onload=function() {var elDiv = document.getElementById('imgContainer');var losFondos = new Array('http://www.google.es/images?q=tbn:DZYW1mMFrUXUAM::blog.plozano.net/wp-content/uploads/2008/05/fondos_mayo.jpg','http://www.google.es/images?q=tbn:y3s1SEvsLf2ZIM::i184.photobucket.com/albums/x79/pixvirtual/fc/109/fondos_3d_eFoY8.jpg','http://www.google.es/images?q=tbn:sRIqhc_esi_nZM::photofiltrecastellano.iespana.es/fondos.jpg','http://www.google.es/images?q=tbn:qMh1ZgWUuDVhDM::www.fondosmyspace.com/completos/fondos/1700.jpg');var indice = Math.floor(Math.random()*losFondos.length);elDiv.style.backgroundImage = 'url(' + losFondos [indice] +')';} 
     </script>   
        
        <DIV id=box-lateral>    
      <DIV id=top></DIV>    
      <DIV id=imgContainer   
      style="BACKGROUND-IMAGE: url(http://images.habbos.es/websystem/release_6/box-register/156.gif); BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; WIDTH: 208px; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; HEIGHT: 175px; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid; PADDING-TOP: 5px"  >    
      <DIV id=enter><A class=button     
      href="index.php?s=register"><B><SPAN>Regístrate <IMG     
      src="http://images.habbos.es/websystem/release_6/flashy_arrow.gif"></SPAN></B><I></I></A>     
      </DIV></DIV>    
      <DIV id=bottom></DIV></DIV>

No devo tocar nada?

SeaPirates · #12 (**permalink**) 06/08/2009, 01:31

eh? xD solo necesito saber eso..

djaevi · #13 (**permalink**) 06/08/2009, 05:50

No no tenes que tocar nada solo como te recomende pone los estilos en una hoja externa y saca el del backround-image porque ahora lo vas a cargar via javascript

Saludos

SeaPirates · #14 (**permalink**) 06/08/2009, 08:27

Me sigue sin funcionar..

Código PHP:

  <script src="prueba.js"></script> 
 
 <script>   
     window.onload=function() {var elDiv = document.getElementById('imgContainer');var losFondos = new Array('http://www.google.es/images?q=tbn:DZYW1mMFrUXUAM::blog.plozano.net/wp-content/uploads/2008/05/fondos_mayo.jpg','http://www.google.es/images?q=tbn:y3s1SEvsLf2ZIM::i184.photobucket.com/albums/x79/pixvirtual/fc/109/fondos_3d_eFoY8.jpg','http://www.google.es/images?q=tbn:sRIqhc_esi_nZM::photofiltrecastellano.iespana.es/fondos.jpg','http://www.google.es/images?q=tbn:qMh1ZgWUuDVhDM::www.fondosmyspace.com/completos/fondos/1700.jpg');var indice = Math.floor(Math.random()*losFondos.length);elDiv.style.backgroundImage = 'url(' + losFondos [indice] +')';} 
     </script>   
        
        <DIV id=box-lateral>    
      <DIV id=top></DIV>    
      <DIV id=imgContainer   
      style="BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; WIDTH: 208px; PADDING-RIGHT: 0px; BACKGROUND-POSITION: right bottom; HEIGHT: 175px; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid; PADDING-TOP: 5px"  >    
      <DIV id=enter><A class=button     
      href="index.php?s=register"><B><SPAN>Regístrate <IMG     
      src="http://images.habbos.es/websystem/release_6/flashy_arrow.gif"></SPAN></B><I></I></A>     
      </DIV></DIV>    
      <DIV id=bottom></DIV></DIV>

y el js:

Código PHP:

  var losFondos = new Array(); 
losFondos[1] = 'box-register/1.gif'; 
losFondos[2] = 'box-register/2.gif'; 
 // imagen1 o imagen2.jpg son ejemplos debes colocar tus rutas a tus imagenes...

que hago mal?

David · #15 (**permalink**) 06/08/2009, 09:05

Debes quitar toda esta parte:

Código Javascript:

Ver originalvar losFondos = new Array('http://www.google.es/images?q=tbn:DZYW1mMFrUXUAM::blog.plozano.net/wp-content/uploads/2008/05/fondos_mayo.jpg','http://www.google.es/images?q=tbn:y3s1SEvsLf2ZIM::i184.photobucket.com/albums/x79/pixvirtual/fc/109/fondos_3d_eFoY8.jpg','http://www.google.es/images?q=tbn:sRIqhc_esi_nZM::photofiltrecastellano.iespana.es/fondos.jpg','http://www.google.es/images?q=tbn:qMh1ZgWUuDVhDM::www.fondosmyspace.com/completos/fondos/1700.jpg');

Ya que está sobreescribiendo la variable.

SeaPirates · #16 (**permalink**) 06/08/2009, 09:41

Hola, ya esta, pero ahora tengo otro problema, aveces cuando cargo la página el div aparece sin fondo, es decir transparente, como arreglo eso?

djaevi · #17 (**permalink**) 06/08/2009, 09:47

Eso es porque estas llamando una ruta de imagen invalida porque esta automatizado para que te tome todos los valores del array por lo cual deberia ser eso, lo que podes probar es hacer un alert asi cuando aparece transparente te dice que imagen no se cargo...

Saludos

SeaPirates · #18 (**permalink**) 07/08/2009, 02:50

Ah! vale, esque havian unas imagenes que no las subi correctamente, gracias! +1