Cambiando IMG SRC con Javascript

Question

Soy nuevo en javascript y si bien hay muchas soluciones más complejas, no las entiendo y espero no tener que hacerlo en este momento.

tengo una imagen principal ...

<img src="main-picture.jpg" name="Mainpic" id="image"> 

... y quiero ser capaz de cambiar esta imagen cuando hago clic en una de las dos imágenes en miniatura.

<a href="" onclick="FirstPic()"><img src="replacement1.jpg" name="pic1"></a> 
<a href="" onclick="SecPic()"><img src="replacement2.jpg" name="pic2"></a> 

Mi código de JavaScript pensé que sería muy fácil. Actualmente estoy usando ...

function FirstPic(){ 
     document.Mainpic.src = document.pic1.src 
     return 
    } 

function SecPic(){ 
     document.Mainpic.src = document.pic2.src 
     return 
    } 

Ahora la variable es cambiando sin embargo, no va a quedar cambiado. Cuando se hace clic en la miniatura, la imagen de reemplazo parpadea en la pantalla y luego vuelve a la imagen principal original .jpg.

¿Cómo puedo hacer que el cambio sea permanente hasta que se haga clic en una miniatura diferente?

Gracias!

Answer 1

Creo que está retrocediendo porque su página se está recargando.

Debe devolver el valor falso desde su onclick = si no desea que href = value se active después de su onclick.

Además, puede establecer href = "#" por si acaso. # Va a ninguna parte (no siempre recargar la página)

Answer 2

Creo que su página es refrescante por su clic, cambiar sus enlaces como:

<a href="" onclick="FirstPic(); return false;"><img src="replacement1.jpg" name="pic1"></a> 
<a href="" onclick="SecPic(); return false;"><img src="replacement2.jpg" name="pic2"></a> 

Answer 3

Por qué no hacer algo como esto (no han comprobado la sintaxis completamente, por lo que podría ser defectuoso.

function FirstPic() 
{ 
    var pic1 = document.getElementById("pic1"); 
    if (pic1 == typeof('undefined')) return; 
    pic1.src = "newpicname.jpg"; 
} 

Asegúrese de darle las etiquetas de un atributo ID llamada pic1 y pic2 (en lugar de un atributo de nombre) y dar a la imagen en sí misma un atributo 'onclick' ...

<img onclick='FirstPic()' id='pic1' src='image1.jpg' />