Problema con codigo Javascript

[MartFitt]

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?

[Alexis88]

Se me ocurre que tengas tres elementos <img>, siendo el tercero contenido por un enlace. A los tres elementos (las dos primeras imágenes y el enlace que contiene a la tercera imagen) les asignas una clase en común, luego, en la hoja de estilos, los ocultas y en el código JavaScript, los tomas por la clase que les asignaste. Luego, al cargar la página, muestras al primero de los tres elementos con la clase designada y al darle un clic, lo ocultas y pasas a mostrar el segundo elemento. Enseguida, usando el método setTimeout, ejecutas una función luego de tres segundos, en la cual ocultarás a la segunda imagen para mostrar al enlace con la imagen contenida.

Código HTML:

<img src = "imagen1.jpg" class = "cambia" />
<img src = "imagen2.jpg" class = "cambia" />
<a href = "enlace.html" class = "cambia">
    <img src = "imagen3.jpg" />
</a>
 

Código CSS:

.cambia{
    position: absolute;
    display: none;
}
 

Código Javascript:

var cambia = document.querySelectorAll(".cambia"); //Elementos con la clase "cambia"
 
cambia[0].style.display = "block"; //Por defecto, muestro al primero
 
cambia[0].addEventListener("click", function(){
    this.style.display = "none";
    cambia[1].style.display = "block";
    setTimeout(function(){
        cambia[1].style.display = "none";
        cambia[2].style.display = "block";
    }, 3000);
}, false);
 

DEMO

Podrías simplificar más el código, pero como dices que eres nuevo con JavaScript, será mejor que primero entiendas bien esta sencilla forma de hacerlo para que más adelante lo simplifiques. No olvides colocar el código JavaScript justo antes de la etiqueta </body> para que surta efecto.

Saludos