Ändern IMG SRC mit Javascript

Question

Ich bin neu bei Javascript und während es viele komplexere Lösungen sind, verstehe ich sie nicht und hoffe, ich muss an dieser Stelle nicht.

ich ein Hauptbild haben ...

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

... und ich möchte in der Lage sein, dieses Bild zu ändern, wenn ich auf einem von zwei Thumbnails klicken.

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

Mein JavaScript-Code dachte ich wäre super einfach. Ich bin derzeit mit ...

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

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

Nun ist die Variable ist ändert aber es ist nicht bleiben geändert. Wenn das Vorschaubild angeklickt wird, blinkt das Ersatzbild auf dem Bildschirm und kehrt dann zum ursprünglichen Hauptbild.jpg zurück.

Wie mache ich die Änderung dauerhaft, bis eine andere Miniatur angeklickt wird?

Danke!

Answer 1

Ich denke, es wird zurückgedreht, weil Ihre Seite neu geladen wird.

Sie müssen von Ihrem onclick = false zurückgeben = wenn Sie nicht möchten, dass der href = Wert nach Ihrem onclick aktiviert wird.

Sie können auch href = "#" nur für den Fall einstellen. # Geht nirgendwo (nicht immer die Seite neu laden)

Answer 2

Ich denke, Ihre Seite ist erfrischend von Ihrem Klick Ihre Links ändern:

<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

Warum nicht etwas tun (nicht überprüft die Syntax komplett, so könnte es fehlerhaft sein.

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

Stellen Sie sicher, geben Sie die Tags ein ID-Attribut pic1 und pic2 (anstelle eines Namensattribut) genannt und geben dem Bild selbst ein ‚Onclick‘ Attribut ...

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