Hola:
Han reportado el tema para moverlo al dedicado al empleo, pero me parece que es innecesario (si piensas lo contrario te sugiero que tu mismo lo reportes).
La verdad es que la explicación es bastante sencilla (a no ser que luego pretendas más), y podemos intentar ayudarte para que lo consigas tu mismo.
Para que pase algo con un click, debes programar ese evento, o sea, para lo que quieres sería algo así:
<img src="imagen_contador.gif" alt="iniciar cuenta regresiva" onclick="regresiva()" />
Dentro del código de "regresiva" deberías mostrar esa imagen de la forma que te parezca mejor, una sencilla es tenerla oculta y mostrarla cambiando el estilo de visualización (esa parte te la dejo), luego iniciar el temporizador, también de la forma que tu quieras... por ejemplo asignando el valor inicial a una variable:
conteo = 100;
Por último la temporización, para lo cual existen dos métodos: setTimeout y setInterval, el primero funciona una sola vez, así que habría que usar una instrucción por cambio de valor, y el otro solo se usa una vez, pero al acabar el conteo se debería cancelar con clearInterval... un ejemplo con el primero sería:
setTimeout(mostrarCuenta, 1000);
el primer parámetro es la función o código que se ejecutará, y el segundo el número de milisegundos para ejecutar lo primero...
Un posible código sería:
function mostrarCuenta() {
if (conteo-- == 0) {
mostrarContador();
setTimeout(mostrarCuenta, 1000);
}
else mostrarImagen();
}
También te dejo lo de mostrarContador y mostarImagen... no creo que te cueste mucho hacerlo.
Saludos
