Ver Mensaje Individual
  #5 (permalink)  
Antiguo 27/03/2012, 20:30
pistonasos
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: Cambiar fondo de una tabla cada 10 segundos

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

Última edición por pistonasos; 28/03/2012 a las 17:50