Fondo javascript cambiante

fedu64 · #1 (**permalink**) 15/01/2011, 19:01

Buenas tardes, es la primera vez que escribo y espero que me puedan ayudar con mi duda. Tengo un codigo javascript el cual cambia de background cada vez que es refrescado y no ocupan de ancho toda la pantalla pero de alto se paso y eso que las imagenes miden 1200x800. Lo que me gustaria es que el background ocupe todo el fondo cambiando sin la necesidad de hacer refresh. Pongo mi codigo javascript para que observen que podria agregar o modificar para que sea posible:

<script language="javascript">
var banner= new Array()
banner[0]="recurso/back01.jpg"
banner[1]="recurso/back02.jpg"
banner[2]="recurso/back03.jpg"
banner[3]="recurso/back04.jpg"
banner[4]="recurso/back05.jpg"
banner[5]="recurso/back06.jpg"
banner[6]="recurso/back07.jpg"
var random=Math.floor(7*Math.random());
document.write("<style >");
document.write("body {");
document.write(' background: #000000 url("' + banner[random] + '") no-repeat left top; background-attachment:fixed; top: 0; left: 0;');
document.write(" }");
document.write("</style>");
</script>

MRB09 · #2 (**permalink**) 15/01/2011, 20:44

Cita:

Iniciado por fedu64

Buenas tardes, es la primera vez que escribo y espero que me puedan ayudar con mi duda. Tengo un codigo javascript el cual cambia de background cada vez que es refrescado y no ocupan de ancho toda la pantalla pero de alto se paso y eso que las imagenes miden 1200x800. Lo que me gustaria es que el background ocupe todo el fondo cambiando sin la necesidad de hacer refresh. Pongo mi codigo javascript para que observen que podria agregar o modificar para que sea posible:

<script language="javascript">
var banner= new Array()
banner[0]="recurso/back01.jpg"
banner[1]="recurso/back02.jpg"
banner[2]="recurso/back03.jpg"
banner[3]="recurso/back04.jpg"
banner[4]="recurso/back05.jpg"
banner[5]="recurso/back06.jpg"
banner[6]="recurso/back07.jpg"
var random=Math.floor(7*Math.random());
document.write("<style >");
document.write("body {");
document.write(' background: #000000 url("' + banner[random] + '") no-repeat left top; background-attachment:fixed; top: 0; left: 0;');
document.write(" }");
document.write("</style>");
</script>

Código:

<html>
<head>
<script type="text/javascript">
var im = false;
function cambiaImagen() {
  tab = document.getElementById('body');
  tab.style.background = (im = !im) ? 'url(imagen2.jpg)' : 'url(imagen1.jpg)'; 
}
</script>
</head>
<body onload="setInterval('cambiaImagen()',3000)" id="body" style="background:url(imagen1.jpg)>
Contenido
</body>
</html>

Intentá con eso

fedu64 · #3 (**permalink**) 15/01/2011, 21:01

Cita:

Iniciado por MRB09

Código:

<html>
<head>
<script type="text/javascript">
var im = false;
function cambiaImagen() {
  tab = document.getElementById('body');
  tab.style.background = (im = !im) ? 'url(imagen2.jpg)' : 'url(imagen1.jpg)'; 
}
</script>
</head>
<body onload="setInterval('cambiaImagen()',3000)" id="body" style="background:url(imagen1.jpg)>
Contenido
</body>
</html>

Intentá con eso

Hola gracias por aporte en verda, sin embargo ya habia llegado a esa parte la cual solo es para 2 imagenes y ahora estoy tratando de que sea con 7 imagenes y que ademas ocupen todo el background del browser, el cual he tratado con estilos sin exito. Gracias por tu contribucion C:

uikekarallo · #4 (**permalink**) 17/01/2011, 18:56

Código HTML:

 ⁄⁄ autor de este código: Iván Nieto Pérez

 ⁄⁄ numero de imagenes de fondo disponibles  
 var numImagenes = 4  
 ⁄⁄ nombre de las imagenes = prefijoNombre + numero de 1 a numImagenes + extension  
 var prefijoNombre = '⁄images⁄rusia⁄IMG_'  
 ⁄⁄ 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('<body background="' + imagenes[ aleatorio ] + '">')  
 }

buscando un poco todo se encuentra :)

saludos.