Thay đổi IMG SRC bằng Javascript

Question

Tôi mới ở javascript và trong khi có nhiều giải pháp phức tạp hơn, tôi không hiểu chúng và hy vọng tôi không phải vào thời điểm này.

Tôi có một bức tranh chính ...

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

... và tôi muốn để có thể thay đổi hình ảnh này khi tôi click vào một trong hai hình thu nhỏ.

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

Mã javascript của tôi tôi nghĩ sẽ cực kỳ dễ dàng. Tôi hiện đang sử dụng ...

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

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

Bây giờ biến là thay đổi tuy nhiên nó không ở thay đổi. Khi hình thu nhỏ được nhấp vào, hình ảnh thay thế sẽ nhấp nháy trên màn hình và sau đó nó sẽ trở về ảnh chính gốc.

Làm cách nào để thay đổi vĩnh viễn cho đến khi một hình thu nhỏ khác được nhấp?

Cảm ơn!

Answer 1

Tôi nghĩ rằng nó đang lật ngược vì trang của bạn đang tải lại.

Bạn cần trả về false từ onclick = nếu bạn không muốn giá trị href = giá trị kích hoạt sau onclick.

Ngoài ra, bạn có thể đặt href = "#" chỉ trong trường hợp. # Đi đâu (không bao giờ tải lại trang)

Answer 2

Tôi nghĩ rằng trang của bạn là làm mới bằng cách nhấp chuột của bạn, thay đổi liên kết của bạn như:

<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

Tại sao không làm một cái gì đó như thế này (chưa kiểm tra cú pháp hoàn toàn, vì vậy nó có thể bị lỗi.

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

Hãy chắc chắn rằng bạn cung cấp cho các thẻ một thuộc tính ID gọi pic1 và pic2 (thay vì một thuộc tính name) và đưa ra hình ảnh bản thân một 'onclick' thuộc tính ...

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