Banner aleatorio

gorkreg · #1 (**permalink**) 26/10/2009, 11:06

Tengo un sitio en el que hay una imágen de fondo como banner dependiendo de la sección en la que se esté. Hasta ahora lo tenía montado con CSS de modo que en la sección, por ejemplo, "servicios", siempre aparecía "imágen 1" y en "quienes somos", "imágen 2", etc.

Lo que quiero ahora es que ese banner se cargue aleatoriamente usando Javascript. He estado mirando varios códigos pero ninguno me convence pues se basan en una imágen pero no de fondo y, además, incluyen el código js dentro de la división del banner. ¿Sabéis de algún código inobtrusivo que funcione en este caso?

Gracias de antemano.

dggluz · #2 (**permalink**) 26/10/2009, 12:07

http://www.forosdelweb.com/f13/cambi...os-seg-535315/
Mira ese enlace. Se me ocurre que lo que quieres se puede hacer con:

Código:

function setFondo()
{
arrImages=new Array('urlImagen1', 'urlImagen2', ...);
var i=Math.round(Math.random()*arrImages.lenght);
window.document.style.background=arrImages[i];
}

Y llama a la función en el onload del body. No probé el código, así que puede tener errores. ¡Suerte!

gorkreg · #3 (**permalink**) 26/10/2009, 12:25

Gracias dggluz. Lo probaré a ver qué tal y respondo.

gorkreg · #4 (**permalink**) 26/10/2009, 15:13

He probado el código que me pasaste pero soy bastante novato en cuanto a Javascript se refiere

Así que, claro, no me funciona. Supongo que se deberá a algún error en el código. Mi mayor problema está en cómo tengo que codificar la ruta para llamar a las imágenes. Pongo el código a ver si encontráis qué estoy haciendo mal:

En el <head>:

Código:

<script type="text/javascript">
function setFondo()
{
arrImages=new Array('url(img/banners/image01.jpg)', 'url(img/banners/image02.jpg)');
var i=Math.round(Math.random()*arrImages.lenght);
window.document.style.background=arrImages[i];
}
</script>

(Las imágenes las tengo dentro de una carpeta llamada "banners" que, a su vez, está dentro de otra carpeta llamada "img". ¿Quizá tengo que poner la ruta absoluta?)

Luego la llamada en el <body>:

Código:

<body onload="setInterval('setFondo()')">

Y por último, tengo la primera imágen como fondo del banner en mi archivo CSS:

Código:

#header .container {
	background-image: url(img/banners/image01.jpg);
}

(.container porque tengo una división dentro de #header llamada así para centrar la web)

dggluz · #5 (**permalink**) 26/10/2009, 21:23

Disculpa, el error ha sido mío. Ocurre que confundí lenguajes de programación y mezclé javascript con PHP

. La declaración del Array se hace sin elementos:

Código:

var arrImages=new Array();
arrImages[0]='urlDeTuPrimerImagen';
arrImages[1]='urlDeTuSegundaImagen';
.
.
.

Discúlpame la confusión. En cuanto a la llamada desde el body, hazla así:

Código HTML:

<body onload="setFondo();">

No hace falta ningún interval.
Lo de las rutas: eso depende de donde estén las imágenes en relación a dónde tengas el script. Creo que eso es todo (ahora sí espero no haberme equivocado de nuevo). Cualquier cosa pregunta. ¡Suerte!

gorkreg · #6 (**permalink**) 27/10/2009, 10:07

Perdona, pero soy totalmente novato con Javascript. De momento tengo este código en el <head> pero ¿qué más tengo que añadir para que se carguen las imágenes en la división #header . container?

Código:

<script type="text/javascript">
function setFondo()
{
var arrImages=new Array();
arrImages[0]='http://miweb.com/img/banners/imagen01.jpg';
arrImages[1]='http://miweb.com/img/banners/imagen02.jpg';
arrImages[2]='http://miweb.com/img/banners/imagen03.jpg';
}
</script>

Sigo teniendo una duda con la dirección de las imágenes. Supongo que tengo que poner la direccion absoluta, como en el ejemplo anterior. ¿Sería esta la forma correcta?

Gracias otra vez.

dggluz · #7 (**permalink**) 27/10/2009, 23:58

Disculpa, evidentemente no programo bien cuando no checkeo el código: había escrito mal "length" (había puesto mal la "h"), había olvidado el body

y había que poner la ruta dentro de "url()". De todos modos, te estabas olvidando de la segunda parte del script. Va un ejemplo de cómo quedaría:

Código javascript:

Ver originalfunction setFondo()
{
    var arrImages=new Array();
    arrImages[0]='img/banners/imagen01.jpg';
    arrImages[1]='img/banners/imagen02.jpg';
    arrImages[2]='img/banners/imagen03.jpg';
    var i=Math.round(Math.random()*arrImages.length);
    window.document.body.style.backgroundImage='url('+arrImages[i]+')';
}

Creo que con eso no habrá problemas. Recuerda llamar al script en el onload del body. ¡Suerte!

PD: a propósito, ¿esto era para el fondo del documento o de una caja (por ejemplo de un div)? El código que puse cambia el fondo del documento...

gorkreg · #8 (**permalink**) 28/10/2009, 08:19

Gracias dggluz. Queda clar el tema de la ruta de las imágenes.
La imágen aleatoria no es para el fondo del <body> sino para una div llamada ".container" que a su vez está dentro de otra div llamada "#header".

Este es el código que, siendo ignorante de javascript, supongo:

Código:

<script type="text/javascript">
function setFondo()
{
    var arrImages=new Array();
    arrImages[0]='img/banners/image01.jpg';
    arrImages[1]='img/banners/image02.jpg';
    arrImages[2]='img/banners/image03.jpg';
    var i=Math.round(Math.random()*arrImages.length);
	document.write("<style type="text/css">");
	document.write("#header .container {");
	document.write('background-image: url("'+arrImages[i]+'")');
	document.write(" }");
	document.write("</style>");
}
</script>

Tengo la llamada onload al setFondo() desde el <body> también y he eliminado la regla CSS en la que daba una imágen de fondo al #header . container. Pero no funciona. Supongo que porqué habrá algún fallo en el código.

dggluz · #9 (**permalink**) 28/10/2009, 13:01

La verdad que no me gusta nada eso de imprimir el tag style con javascript.... te recomiendo que hagas algo como lo siguiente: primero ponle un id a tu div (al que quieres cambiarle el fondo), luego intenta usar la función algo así:

Código javascript:

Ver originalfunction setFondo()
{
    var arrImages=new Array();
    arrImages[0]='img/banners/imagen01.jpg';
    arrImages[1]='img/banners/imagen02.jpg';
    arrImages[2]='img/banners/imagen03.jpg';
    var i=Math.round(Math.random()*arrImages.length);
    document.getElementById('elIdDeTuElemento').style.backgroundImage='url('+arrImages[i]+')';
}

Prueba con eso. Cualquier cosa, vuelve a postear tus dudas. ¡Suerte!

gorkreg · #10 (**permalink**) 28/10/2009, 14:04

No, no funciona

He probado a crear una página muy simple y con los CSS incluídos en ella por si acaso se trataba de algún fallo por otro lado pero nada, no aparece ninguna imágen. También he comprobado la ruta y los nombres de archivo y directorios meticulosamente y el resultado es el mismo: Fracaso

Asi que no puede ser otra cosa que el código Javascript. Yo lo único que tengo es ese código en el head con sus correspondientes etiquetas de abertura y cierre de javascript y el llamamiento desde el <body>:

Código:

<body onload="setFondo();">

Igual me estoy dejando alguna otra cosa importante por ahí. Como digo, en Javascript soy totalmente novato.

dggluz · #11 (**permalink**) 29/10/2009, 07:38

Prueba debuggearlo (te recomiendo que uses la consola de errores de Firefox (o la de Google Chrome, o alguna otra, pero IE no es muy bueno para depurar código). O mándame todo tu código por MP.