Ayuda con un script por favor.

Pregunton13 · #1 (**permalink**) 21/01/2010, 03:09

Soy un estudiante de bachiller hace poco curse una materia de paginas web en la cual no sali airoso ahora mi profesor del curso de regularizacion me pide que haga una pagina que quizas suba luego a internet googleando encontre un efecto que me gusto. [URL="http://www.ssae.com.mx/cia2/"]http://www.ssae.com.mx/cia2/[/URL] Se trata de la tabla que esta a un lado del video donde se resalta cada x segundos un elemento de la izquierda y se cambia al mismo tiempo el contenido de la derecha y el nombre que baja cambia. Se lo mostre al profesor para obtener su ayuda pero me dijo que no quiere que no lo use por no poder hacerlo asi que me dijo que piense como hacer una funcion para indicarle unos pocos parametros y poder usarlo con cualquier tabla me dio ejemplos de parametros como por ejemplo el id de la tabla para animar, la orientacion izq o der dependiendo de si quiero animar la primera o ultima columna el numero de segundos y me dijo que piense si todos son necesarios o no o si hay mas necesarios. Como sea tengo 3 semanas y la fecha de entrega se aproxima etoy desesperado por ayuda ya lo intente varias veces logro que se resalten la primera o ultima columna pero cuando quiero que se haga de a celda en celda cada x segundos me marca error. intente usar settimeout y setinterval pero me marca error. aqui pongo el poco codigo que tengo aun y agradeceria toda la ayuda posible

newsmainboard.js

Código:

/*
a = id de la tabla a animar
b = orientacion izquierda o derecha
c = inicia en la celda
d = termina en la celda
e = intervalo de tiempo
*/
function resaltar(a,b) {
var color = ["#999999","#333333"];
tabla = document.getElementById(a);
filas = tabla.getElementsByTagName("tr") ;
if(filas[0].getElementsByTagName("th").length > 0) {
columnas = filas[0].getElementsByTagName("th");
}else if(filas[0].getElementsByTagName("td").length > 0) {
columnas = filas[0].getElementsByTagName("td")
}
var rpt = filas.length;
for(x=1; x <= rpt; x = x+1) 
{
nt = x-1;
	if(b=='izq') {
	tl = filas[nt].getElementsByTagName("td");
	setTimeout(tl[0].style.backgroundColor=color[0],10000);
	setTimeout(tl[0].style.backgroundColor=color[1],10000);
	}else if(b=='der') {
	tl = filas[nt].getElementsByTagName("td");
	tl[(tl.length)-1].style.backgroundColor=color[0];
	}
}
	setTimeout(tl[0].style.backgroundColor=color[0],10000);
}

index.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Animacion</title>
<script type="text/javascript" language="javascript" src="animar.js"></script>
</head>
<body onload="resaltar('noticias','izq'); ">

<div>
	<table style="width: 100%;border:thin black solid" id="noticias">
		<tr>
			<td>
			<img src="t26-06-09-b.jpg" width="60" height="39" alt="" />
			a</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>
			<img src="t26-06-09-b.jpg" width="60" height="39" alt="" />b</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>
			<img src="t26-06-09-b.jpg" width="60" height="39" alt="" />c</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>
			<img src="t26-06-09-b.jpg" width="60" height="39" alt="" />d</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>
			<img src="t26-06-09-b.jpg" width="60" height="39" alt="" />e</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>

</body>

</html>

ceSharp · #2 (**permalink**) 21/01/2010, 07:03

hola pregunton,

a ver si te puede valer esto:
------------------------------------------------------------
//con setInterval llamamos a la función resaltar() cada dos segundos
setInterval(resaltar,2000);

//la variable fila nos va a indicar que fila toca en todo momento cambiar de color
//como la página arranca con la fila uno coloreada, la variable fila empieza en dos
var fila = 2

function resaltar()
{
//declaramos en variables las filas de la tabla
var tr1 = document.getElementById('tr1');
var tr2 = document.getElementById('tr2');
var tr3 = document.getElementById('tr3');

//con switch vamos a valorar fila para saber cual toca cambiar de color
switch(fila)
{
case 1:
//primera fila. alteramos el color de dicha fila
tr1.style.backgroundColor = '#333333';
//y el resto de filas las dejamos del color original
tr2.style.backgroundColor = '#999999';
tr3.style.backgroundColor = '#999999';
break;
case 2:
//segunda fila. alteramos el color de dicha fila
tr2.style.backgroundColor = '#333333';
//y el resto de filas las dejamos del color original
tr1.style.backgroundColor = '#999999';
tr3.style.backgroundColor = '#999999';
break;
case 3:
//tercera fila. alteramos el color de dicha fila
tr3.style.backgroundColor = '#333333';
//y el resto de filas las dejamos del color original
tr1.style.backgroundColor = '#999999';
tr2.style.backgroundColor = '#999999';
break;
}
//finalizado el switch aumentamos uno el valor de fila
fila += 1
//y preguntamos con if si es mayor que 3, para que vuelva a uno
if(fila > 3)
fila = 1;

}
---------------------------------------
y esto en el HTML
---------------------------------------
<table border="1">
<tr id="tr1" style="height:30px; background-color:#333333;color:red">
<td ><img src="t26-06-09-b.jpg" alt="" />
</td>
<td style="width:200px">Imagen 1
</td>
</tr>
<tr id="tr2" style="height:30px; background-color:#999999;color:red">
<td><img src="t26-06-09-b.jpg" alt="" />
</td>
<td style="width:200px">Imagen 2
</td>
</tr>
<tr id="tr3" style="height:30px; background-color:#999999;color:red">
<td><img src="t26-06-09-b.jpg" alt="" />
</td>
<td style="width:200px">Imagen 3
</td>
</tr>

</table>
----------------------------------------------

Pruébalo y nos cuentas.

salu2

Pregunton13 · #3 (**permalink**) 21/01/2010, 14:32

Guau ceSharp gracias si funciono eres genial gracias con esto ya puedo hacer gran parte de lo que me falta gracias de verdad