esperar unos segundos para que una capa cambie de color

dvdaya · #1 (**permalink**) 23/09/2005, 04:35

Hola a todos!
No se si se puede hacer con javascript que una capa que contiene texto, al cabo de unos segundos, ese texto cambie de color. Algo parecido a lo que se suele hacer con flash. me entienden?

Tampoco sé si es necesario que el texto esté en una capa (div) o en una celda de una tabla?

Así que no se si hay alguna rutina que controle el tiempo para que un texto pueda cambiar de color en unos determinados segundos que yo elija.

Saben cómo? o donde puedo encontrar información sobre ello?Tal vez se pueda hacer con html (con CSS) o qué?

Gracias de antemano

JavierB · #2 (**permalink**) 23/09/2005, 08:35

Hola dvdaya

Echa un vistazo a este código, te cambiará al color a los 3 segundos:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function cambiar() { 
  document.getElementById('pepe').style.color = '#0ff'; 
} 
</script> 
</head> 
<body onload="setTimeout('cambiar()',3000)"> 
<div id="pepe">Hola, soy Don José</div> 
</body> 
</html>

Saludos,

dvdaya · #3 (**permalink**) 23/09/2005, 11:29

Hola JavierB! funciona Perfecto! Pero dónde declaras el color de inicio ?
porque el color final es #0ff', que le he puesto #567435 y cambia a verde, aunque no entiendo porque, con Off, por defecto sale azul!, pero bueno?

Y tú crees que se puede utilizar para que cambie de color 4 o 5 veces (colores diferentes en segundos dferentes? He intentado alguna cosilla y no me ha salido!

me puedes echar otro cable?
Gracias

dvdaya · #4 (**permalink**) 23/09/2005, 11:49

He hecho lo siguiente, pero no sé si es correcto, aunque funciona!
Para que el primer color lo domine yo, he puesto un valor muy pequeño, para que pase del negro otro y luego he copiado varias veces la función y va cambiando. El caso es que funciona, pero no sé si hay alguna manera mejor de resolverlo.

Aún así gracias. Creo que este método puede sustituir cosas que hacemos con flash, que como ya sabemos a los buscadores no les gusta mucho!
creo que es muy interesante
<html>
<head>
<script type="text/javascript">
function cambiar() {
document.getElementById('pepe').style.color = '#546733';
}
</script>
<script type="text/javascript">
function cambiar1() {
document.getElementById('pepe').style.color = '#843654';
}
</script>
</script>
<script type="text/javascript">
function cambiar2() {
document.getElementById('pepe').style.color = '#231567';
}
</script>
</head>
<body onload="setTimeout('cambiar()',0001);setTimeout('c ambiar1()',6000);setTimeout('cambiar2()',9000)">
<div id="pepe">Hola, soy Don José</div>
</body>
</html>

JavierB · #5 (**permalink**) 23/09/2005, 12:22

Hola de nuevo.

#0ff es lo mismo que #00ffff

El color inicial puedes ponerlo en la etiqueta <div>

<div id="pepe" style="color:#546733">

y ya puestos, he simplificado tu código para que quede más claro:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
var color = ['#843654','#231567','#546733'] 
var num = 0; 
function cambiar() { 
  document.getElementById('pepe').style.color = color[num]; 
  num++; 
  if (num==color.length) num=0; 
} 
</script> 
</head> 
<body onload="setInterval('cambiar()',3000)"> 
<div id="pepe" style="color:#546733">Hola, soy Don José</div> 
</body> 
</html>

Saludos,

dvdaya · #6 (**permalink**) 23/09/2005, 12:36

Gracias JavierB!
me has ayudado muchísimo!
voy a provarlo.

Saludos,