Ejecutar durante un tiempo gif tras apretar botón

angelicorum · #1 (**permalink**) 05/06/2008, 11:19

Hola

Me gustaría hacer que tras apretar un botón y durante un pequeño tiempo (Medio min, por ejemplo) se ejecutará un gif en movimiento, para luego desaparecer y que aparezca lo que debe de estar mostrándose en la web.
Esto lo haría tantas veces como se apretara el botón y la imagen no podría aparecer hasta que no se apretara el mismo.

Bueno, si a alguien se le ocurre alguna solución se lo agradecería un montón,

un saludín

Ángelicorum

00siete · #2 (**permalink**) 05/06/2008, 11:51

Yo lo haría del siguiente modo:
- Necesitas asociar una función javascript al botón, por ejemplo con el evento onClick.
- La imagen necesita tener un "id" para localizarla desde la función anterior.
- La imagen debe tener inicialmente el atributo: display:none para que esté oculta.
- Cuando se ejecute la función debe localizar la imagen con getElementById(xxx) y cambiar el atributo a display:block por ejemplo.
- La función debe poner una temporización con setTimeout() para invocar a una segunda función que será la que vuelva a poner el atributo display:none

angelicorum · #3 (**permalink**) 06/06/2008, 01:46

Hola de nuevo,

ante todo muchas gracias por responder, si no es ya excederse...
algun ejemplo para ésto?:

"La función debe poner una temporización con setTimeout() para invocar a una segunda función que será la que vuelva a poner el atributo display:none"

Saludos,

Angelicorum

angelicorum · #4 (**permalink**) 06/06/2008, 04:27

Buenas otras vez, tengo esto (resumido):

<html>
<head>
<script language="javascript">
function capa2()
{
document.getElementById('ima').style.display='none '
document.getElementById('capa2').style.display='bl ock'
}
function capa()
{
document.getElementById('ima').style.display='bloc k'
document.getElementById('capa2').style.display='no ne'
window.setTimeout('capa()',120000)
}
</script>
</head>
<body>
<img src="img/miima.gif" border="0" alt="Imaima" id="ima" style="display:none">
<div id="capa2" style="display:block">
aquí pongo contenido diverso dinámico
</div>
</body>
</html>

Pero sólo me muestra la imagen unos segundos, aunque cambie el tiempo en setTimeout y quiero que quede un poco más. Algún consejillo. Muchas gracias.

miSko · #5 (**permalink**) 06/06/2008, 08:04

Supongamos que tienes un DIV donde esta la Imagen, q es lo que quieres mostrar cuando se haga click :

Código PHP:

      <script>
        var nombreCapa = "capa" ;
        
        function btn_onClick() {
            var numMins = 2 ;
            document.getElementById(nombreCapa).style.visibility = 'visible' ;
            // Si, yo uso visibility, no display xD
            setTimeout("escondeCapa()",numMins * 60000) ;
        }
        
        function escondeCapa() {
            document.getElementById(nombreCapa).style.visibility = 'hidden' ;
        }

        document.getElementById(idBoton).onclick= btn_onClick ;
    </script>

PD: Acostumbrate a poner los ; al final de cada linea ;)

angelicorum · #6 (**permalink**) 09/06/2008, 02:43

Hola, muchas gracias por la respuesta, tengo otro problemilla. Uf, Esto me está costando...jejej.

Apliqué este código antes del </head> :

document.getElementById("boton").onclick= btn_onClick

Dentro del <body>, mi botón es:

<input type="submit" id="boton" name="boton" class="boton_bg" value="tralari" >

y me da el siguiente error:

docuement. getelementbyid(..) es nulo o no es un objeto

Probé poniendo la instrucción document.getElementById("boton").onclick= btn_onClick debajo de los botones y no me daba el error, pero no me hacía nada.

¿Qué podría estar haciendo mal?

Gracias, Angelicorum

....De esta, aprendo a programar en javascript....