Hola a todos, soy nuevo, tengo un problema con un codigo que he formado, mi plan es este: en una entrada poner una imagen la cual cuando el usuario le de clic aparezca otra imagen que al pasar 3 segundos cambie por otra la cual quede permanente y tenga un enlace, es decir:
Imagen1 - Cambia por "Imagen2" cuando el usuario le de clic
Imagen2 - 3 seg
Imagen3 - Permanente con enlace
Accion: Mostrar "Imagen1" hasta que el usuario le de clic, luego mostrar "Imagen2" por 3 segundo y luego cambiar por "Imagen3" que se quedara permanentemente y tendra un enlace.
Estoy utilizando este codigo:
Código HTML:
<center>
<div id="cont">
<img id="imagenId" src="Imagen1" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'>
$(document).ready(function() {
$("#imagenId").click(function(event){
event.preventDefault();
var nuevaImagen = "Imagen2";
$("#imagenId").attr("src", nuevaImagen); // o $(this).attr("src", nuevaImagen);
});
});
</script>
</div>
<script>
var imagen = '<a href="Enlace"><img src="Imagen3"></a>';
setTimeout(function()
{
document.getElementById('cont').innerHTML = imagen;
}, 3000);
</script>
</center>
El codigo lo guardo como .HTML y lo abro con mi navegador y funciona perfectamente, pero mi objetivo es implementarlo en blogger y lo he hecho de muchas maneras y no funciona, solo muestra la "Imagen1" el usuario da clic y cambia por "Imagen2" y ahi se queda, nunca pasa a "Imagen3", en otras palabras la primera parte del codigo funciona pero cuando tiene que cambiar la imagen al pasar los 3 segundos no funciona en blogger.
Que podria hacer?