Cambiar fondo de una tabla cada 10 segundos

pabloe9k · #1 (**permalink**) 24/03/2012, 17:11

Hola, gente.
Necesito de su ayuda para un trabajo que estoy haciendo.
Dada una tabla como esta:

Código HTML:

<table align="center" width="980" cellpadding="0" cellspacing="0" border="0" background="imagen_fondo.jpg">
   <tr>
      <td width="490" height="440">hola mundo!</td>
   </tr>
</table>

Necesito que la imagen de fondo de la tabla, con nombre imagen_fondo.jpg, automáticamente cambie cada 10 segundos por otras imágenes de idéntico tamaño que se encuentran en el mismo directorio.

Sabía hacerlo con una etiqueta <div> y algo de código javascript, pero al tratarse del fondo de una tabla, no tengo idea de como hacerlo.

Podrán ayudarme?
Muchas gracias de antemano.

Saludos.

pistonasos · #2 (**permalink**) 24/03/2012, 17:45

Podrías hacerlo de dos maneras:
-miTable.setAttribute("background","miImagen.jpg")
-miTable.style.background="url(miImagen.jpg)"

No estoy seguro de que funcionen tal cual te las planteo, pero si les buscas un poquitín la vuelta te puede funcionar de una manera u otra.Salu2

pabloe9k · #3 (**permalink**) 24/03/2012, 18:53

Cita:

Iniciado por pistonasos

Podrías hacerlo de dos maneras:
-miTable.setAttribute("background","miImagen.jpg")
-miTable.style.background="url(miImagen.jpg)"

No estoy seguro de que funcionen tal cual te las planteo, pero si les buscas un poquitín la vuelta te puede funcionar de una manera u otra.Salu2

Podrás pasarme el código completo, por favor?
De JavaScript no se nada.
Gracias.

iasnob · #4 (**permalink**) 25/03/2012, 14:54

Hola,

Yo estoy intentando hacer algo muy parecido. Quiero que, entre 6 divs, solo haya uno show a la vez, y que dure X segundos show, y luego pase a hide y se ponga otro a show. No consigo el delay ese de los X segundos...

Saludos

pistonasos · #5 (**permalink**) 27/03/2012, 20:30

Acá hice un script que te va a servir pabloe9k. No se si le servirá a iasnob porque no entiendo bien que quiere hacer. Lo probé en ópera, iceweasel, chrome y funciona:

Código HTML:

Código:

<html>
	<head>
		<script languge="JavaScript" type="text/javascript" src="./Cambia Fondo Tabla Cada 10 Seg.js"></script>
	</head>
<body>
	<table name="miTabla" align="center">
		<tbody>
			<tr>
				<td><i>Hola Mundo!!</i></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Código JS:

Código:

fondoDin=function(ele,fondos)
{
	this.key="fondoDin"+new Date().getTime()+new Date().getMilliseconds()
	if(typeof(obj)=="undefined")
		{
			obj=new Array()
		}
	obj[this.key]=this
	this.cont=0
	this.ele=ele
	this.conf=new Array()
	this.conf.extra=""
	this.conf.fondos=fondos
	this.conf.retardo=10000
	this.conf.bucle=1
	this.detona=function()
	{
		this.ele.style.background='url("'+this.conf.fondos[this.cont]+'")'
		if(this.cont==this.conf.fondos.length)
			{
				if(this.conf.bucle)
					{
						this.cont=0
					}
				else
					{
						eval(this.conf.extra)
						return 0
					}
			}
		else
			{
				this.cont++
			}
		this.timer=setTimeout("obj['"+this.key+"'].detona()",this.conf.retardo)
	}
	this.aborta=function()
	{
		if(typeof(this.timer)!="undefined")
			{
				clearTimeout(this.timer)
			}
	}
}

Bueno, te paso a explicar el funcionamiento:
Por cada elemento al que le quieras hacer un fondo dinámico (ya sea una tabla, un div o lo que fuere) tenés que crear un objeto del tipo fondoDin pasándole como parámetro el elemento al que se le quiere aplicar el efecto y un array con el src de las imágenes que tiene que mostrar el script.
Ejemplo:

Código:

imgArr=new Array("http://img00","http://img01","http://img02","http://img03","http://img04")
miTablaDin=new fondoDin(document.getElementsByName("miTabla")[0],imgArr)

Después de creado el objeto se le pueden modificar algunas configuraciones así:

Código:

miTablaDin.conf.retardo=10000  //El intervalo de tiempo entre cada fondo, se mide en milisegundos.1000 milisegundos= 1 segundo
miTablaDin.conf.bucle //Cualquier valor distinto de 0 indica que si terminó de recorrer todos los fondos empiece denuevo por el primero y así sucesivamente.En caso de 0 al terminar de recorrer las imegenes fondo se para el efecto.
this.conf.fondos //Para especificar otro array con otros fondos.

Entonces, cuando se desee comienza el efecto:

Código:

miTablaDin.detona()

Y cuando se desee se para (si es que no se paró antes):

Código:

miTablaDin.aborta()

Bueno, una precaución a tomar para que siempre funcione el script es NO especificar el fondo de la tabla en la hoja de estilos , sino que se debe especificar con JS:

Código:

document.getElementsByName("miTabla")[0].style.background="url('http://Ruta/a/la/imagen.jpg')"

Suerte.Cualquier duda con el script consultame.

PD:No lo probé en explorer porque uso linux.

EDITO:Por el tema de los directorios no sabría como hacerlo y no se si se puede hacer con JS.Capaz que se puede con ajax. Igualmente, si manejás php, seguramente puedas agregarle a la web un <script></script> con una variable del tipo Array con todas las imágenes del directorio.Así entonces en JS le pasás la variable al objeto y listo.

Una funcionalidad que me olvidé de nombrar:
Si es que se eligió un bucle finito , se puede indicar alguna acción extra que se ejecutará al terminar el bucle. Por ej:

Código:

miTablaDin.config.extra="window.console.log('Se han acabado los fondos a mostrar')"

Avisame si te funcionó.Salu2