Changer IMG SRC avec Javascript

Je suis nouveau à javascript et même s'il y a beaucoup plus de solutions complexes, je ne les comprends pas et j'espère que je n'ai pas à le faire maintenant.Changer IMG SRC avec Javascript

J'ai une image principale ...

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

... et je veux être en mesure de changer cette image lorsque je clique sur l'un des deux vignettes.

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

Mon code javascript me semblait très simple. Je suis actuellement en utilisant ...

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

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

Maintenant, la variables est changer mais il est pas rester changé. Lorsque la vignette est cliquée, l'image de remplacement clignote sur l'écran, puis revient à l'image principale d'origine.jpg.

Comment puis-je rendre le changement permanent jusqu'à ce qu'une autre vignette soit cliquée?

Merci!

Source

2009-09-08 Anonymous

Je pense que ça revient en arrière parce que votre page est en train de recharger.

Vous devez retourner false à partir de votre onclick = si vous ne voulez pas que la valeur href = soit activée après votre onclick.

De plus, vous pouvez définir href = "#" juste au cas où. # Ne va nulle part (ne jamais recharger la page)

Source

2009-09-08 20:02:39 JasonWoof

D'autre part, je pense que vous pouvez supprimer la balise link et écrire l'événement click sur l'image elle-même. – Biswanath

JasonWoof, ça a fonctionné parfaitement, merci. Cependant la réponse de Biswanath a fonctionné parfaitement aussi et était plus efficace ainsi je me suis juste débarrassé de l'étiquette de lien complètement. –

L'ajout de # le fera défiler jusqu'en haut de la page, si la page est défilable, et ajoutera une étape dans la liste de l'historique. Vous avez donc vraiment besoin de retourner false depuis le gestionnaire '' –

Je pense que votre page est rafraîchissant par votre clic, changer vos liens comme:

<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>

Source

2009-09-08 20:02:44 Canavar

Pourquoi ne pas faire quelque chose comme ça (n'ont pas vérifié la syntaxe completly, il pourrait être défectueux.

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

Assurez-vous de donner les balises un attribut ID appelé pic1 et pic2 (au lieu d'un attribut name) et de donner à l'image un attribut « onclick » ...

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

Source

2009-09-08 20:08:07

Changer IMG SRC avec Javascript

Répondre

Questions connexes