background

javierr365 · #1 (**permalink**) 13/09/2011, 03:14

hola gente ando buscando un codigo, para poner una secuencia de imagenes de background... para poder navegar sobre una pagina con un fondo (interactivo) sensillamente que se muestre una secuenca de imagenes, valga la redundancia

en mi ignorancia intente poner un flash pero no es posible, y no quiero un gif, dada la calidad del mismo... alguien podria darme una mano?

desde ya muchas gracias a ver si consigo aplicar esto a mi web... no se si me doy a entender... espero respuestas y cualquier duda me pregunta y explico mas detenidamente cual es la idea

saludos! ATTE javierr365

RafaRG · #2 (**permalink**) 13/09/2011, 06:08

puedes probar a poner una secuencia de imágenes y a las imágenes les pones el tamaño de la pantalla. luego pones el contenido de la página encima de la secuencia (puedes usar css para definir la apilación de los elementos de la página con la propiedad z-index):

Código PHP:

  <style type="text/css">
#foto {
        position:fixed; top:0%; left:0%;
        z-index:0;
        }
div {
        z-index:2;
        }
</style>
<script language="javascript">
 
//Aquí cambia los nombres de las imágenes por las tuyas.
var imagenes=new Array()
 
imagenes[0]=new Image (380,288);
imagenes[0].src="imagen1.jpg"
imagenes[1]=new Image (399,291);
imagenes[1].src="imagen2.jpg"
imagenes[2]=new Image (248,289);
imagenes[2].src="imagen3.jpg"
imagenes[3]=new Image (215,366);
imagenes[3].src="imagen4.jpg"
 
cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans.apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans.play()
}
else
    {
    document.images.foto.src = imagenes[cont].src
    }
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',5000)
 //cada 5000 milisegundos (5 seg.) cambia la imagen.
//cambia la cantidad por el tiempo que quieras que transcurra entre imagen e imagen
}
 
</script>
</head>
 
<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<img id="foto" src="imagen1.jpg" style="filter:blendTrans(duration=[b]3[/b])" width="100%" height="100%">
<!-- la duración de la transición es de 3 segundos. 
Cambia este valor según tus preferencias -->
<div>
Contenido de la web
</div>
</body>

NOTA: script sacado de las [url=http://www.forosdelweb.com/f13/faqs-javascript-indice-tematico-117856/]faq's de java script[/url] de este mismo foro

emprear · #3 (**permalink**) 13/09/2011, 08:01

Me parece que esto se adapta mejor a lo que necesitas, simplemente cambia el background-image del body

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar background aleatoriamente cada n segundos</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* definimos un background por defecto */
body {
background-image: url('sfondo01.jpg');
}
</style>
<script type="application/javascript">
// aqui definis la lista de imágenes
var fondos = ['sfondo01.jpg', 'sfondo02.gif', 'sfondo03.jpg', 'sfondo04.jpg'];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) fondo_actual = 0;
document.body.style.backgroundImage = 'url('+ fondos[fondo_actual++]+ ')';
}
//aqui definís el tiempo en milisegundos
window.setInterval(CambiarFondo, 3000); 
</script>
</head>
<body>
<h1>Cambiar background aleatoriamente cada n segundos</h1>
</body>
</html>

demo:

http://foros.emprear.com/jsdemo/rota...torotarbg.html

saludos

IsaBelM · #4 (**permalink**) 13/09/2011, 08:13

aunque text/javascript está obsoleto, para ie8- hay que continuar usándolo. también sería conveniente que se hiciese una precarga de imágenes para que no hubiera unos momentos sin ningún contenido

emprear · #5 (**permalink**) 13/09/2011, 11:21

si, se puede mejorar

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar background cada n segundos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* definimos como background por defecto la primera imagen de nuestra lista */
body {
background-image: url('sfondo01.jpg');
}
/* esta div no es visible, pero precarga la imagen siguiente a cargar por body, asi se evita algún posible parpadeo
definimos como background por defecto la 2ª imagen de nuestra lista.
Para la demo le damos un alto y ancho, pero debe establecerse a 0;
*/
div#precarga{
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
background-image: url('sfondo02.gif');
}
h1{
color: #0061C1;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
// aqui definis la lista de imágenes para el cambio automático
var fondos = ['sfondo01.jpg', 'sfondo02.gif', 'sfondo03.jpg', 'sfondo04.jpg', 'sfondo05.jpg', 'sfondo06.jpg', 'sfondo07.jpg'];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++;
var precargar2 = precargar+2;
// cambiamos el background del body
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
// cargamos en el div no visible "#precarga" la imagen siguiente que se cargará en el body
// para ya tenerla en la cache, comenzamos con la imagen 3, ya que la 1 y 2 las tenemos en el css
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
//aqui definís el tiempo en milisegundos e  inicias la función con setInterval para que se repita indefinidamente
window.setInterval(CambiarFondo, 10000); 
//]]>
</script>
</head>
<body>
<div id="precarga"><!-- precarga de backgrounds --></div>
<h1>Cambiar background cada n segundos</h1>
</body>
</html>

demo
http://foros.emprear.com/jsdemo/rota...torotarbg.html

Saludos