cambiar background image cada tantos seg.

budoukai · #1 (**permalink**) 22/11/2007, 14:27

Pregunta: como puedo hacer q en una tabla q contenga una imagen como back ground cambie por otra en un tiempo determinado ?

JavierB · #2 (**permalink**) 22/11/2007, 14:49

Hola budoukai

Para que ocurra algo cada ciento tiempo (por ejemplo, 3 segundos) puedes usar la función setInterval()

Código:

setInterval('cambiaImagen()',3000)

Para cambiar la imagen:

Código:

function cambiaImagen() {
  document.getElementById('idTabla').style.background = 'url(tuimagen.jpg)';
}

También puedes meter varios nombre de imagenes en un array y las vas cambiando.

Saludos,

budoukai · #3 (**permalink**) 22/11/2007, 15:05

disculpa pero desconosco la programacion. no soy programador. En todo caso que parte va en el Head y que parte en el body?.. suponiendo que sean 2 imagenes a intercambiar.

budoukai · #4 (**permalink**) 26/11/2007, 10:18

alguien tiene alguna idea ?

JavierB · #5 (**permalink**) 26/11/2007, 10:30

Hola de nuevo.

Un ejemplo completo:

Código PHP:

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

Saludos,

mancemo · #6 (**permalink**) 26/11/2007, 10:48

hola a todos

y como seria ara que cambie cuando se actualize la pagina unicamente

gracias

mancemo · #7 (**permalink**) 26/11/2007, 10:55

hola a todos

y si lo que quiero cambiar es el bckground de una celda de la tabla y no de la tabla, no se si esto se pueda con css

gracias

budoukai · #8 (**permalink**) 27/11/2007, 15:15

muchas gracias me ayudo bastante.

mancemo para cambiar la celda solo tienes que poner el id="tabla" dentro del <td> y ya no dentro del <table>

mancemo · #9 (**permalink**) 28/11/2007, 09:02

ya lo intente asi pero no me funciono, gracias de todas formas

JavierB · #10 (**permalink**) 28/11/2007, 10:26

Hola mancemo

Pon tu código y le echaremos un vistazo.

Saludos,

dejavumc · #11 (**permalink**) 17/12/2008, 21:57

Un ejemplo completo:

Código PHP:

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

con ese código solo se pueden ver dos imagenes, quiero saber para poner 10 o mas imagenes, estuve probando y solo para dos imagenes funciona barbaro, pero al agregarle una tercer imagen no me anda.
Muchas Gracias

nano-systems · #12 (**permalink**) 13/11/2010, 18:55

buenos dias, me gustaria saber como hacer esa opcion que dice javierB donde dice lo siguiente: "meter varios nombre de imagenes en un array y las vas cambiando" yo he tratado de hacerlo de la siguiente manera pero no me funciona:

var direcciones = new Array(4)
direcciones[0] = 'images/tabla/0.jpg'
direcciones[1] = 'images/tabla/1.jpg'
direcciones[2] = 'images/tabla/2.jpg'
direcciones[3] = 'images/tabla/3.jpg'

var im = false;
var x;
function cambiaImagen() {
tab = document.getElementById('tabla');
if (im = !im) { for (x=0; x<=4; x=x+1) { tab.style.background ='url(direcciones[x])'; } } else {tab.style.background ='url(images/tabla/1.jpg)'; x=0; }
}
</script>

nano-systems · #13 (**permalink**) 14/11/2010, 02:54

he probado tambien con una funcion aleatoria para llamar al array pero tampoco me funciona:

<script type="text/javascript">

var inferior=0;
var superior=4;

function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}

var direcciones = new Array(4)
direcciones[0] = 'images/tabla/0.jpg'
direcciones[1] = 'images/tabla/1.jpg'
direcciones[2] = 'images/tabla/2.jpg'
direcciones[3] = 'images/tabla/3.jpg'

var im = false;
function cambiaImagen() {
tab = document.getElementById('tabla');
if (im = !im) { tab.style.background ='url(direcciones[aleat])'; } else {tab.style.background ='url(images/tabla/1.jpg)';}
}
</script>

JavierB · #14 (**permalink**) 14/11/2010, 03:50

Hola nano-systems

Te recuerdo el aviso que había al final de este tema y que parece que no has leído o no le has hecho ni caso.

Tema cerrado.