Modifica IMG SRC con Javascript

Question

Sono nuovo su javascript e mentre ci sono molte soluzioni più complesse, non le capisco e spero di non doverlo fare a questo punto.

ho un'immagine principale ...

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

... e voglio essere in grado di cambiare questa immagine quando clicco su uno dei due miniature.

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

Il mio codice javascript ho pensato sarebbe stato semplicissimo. Attualmente sto usando ...

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

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

Ora la variabile è cambiamento tuttavia non è stare cambiato. Quando si fa clic sulla miniatura, l'immagine sostitutiva lampeggia sullo schermo e quindi torna al main.jpg originale.

Come si modifica la modifica finché non si fa clic su una miniatura diversa?

Grazie!

Answer 1

Penso che stia tornando indietro perché la pagina si sta ricaricando.

È necessario restituire false dal proprio onclick = se non si desidera che il valore href = venga attivato dopo l'onclick.

Inoltre, è possibile impostare href = "#" nel caso in cui. # Va da nessuna parte (non sempre ricaricare la pagina)

Answer 2

Credo che la tua pagina è rinfrescante dal vostro clic, cambiare il vostro link come:

<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

Perché non fare qualcosa di simile (non hanno controllato il sintassi completamente, in modo che possa essere difettoso.

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

Assicurati di dare i tag un attributo ID chiamato pic1 pic2 e (invece di un attributo name) e dare l'immagine stessa di un 'onclick' attributo ...

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