Javascript Girl
  1. Javascript Girl
  3. Swap d'image sur simple clic Javascript
Intereting Posts
Stockage local vs AngularJS $ cacheFactory Existe-t-il un moyen par lequel je peux utiliser des classes WMI dans Java? Quel est ce modèle de conception connu sous JavaScript / jQuery? Mon très simple script Greasemonkey ne fonctionne pas? Calculer la somme des produits en utilisant un attribut td Suppression d'un article publié précédemment avec OpenGraph, ou vérifiez si ledit article a déjà été lu Document.getElementById renvoie la valeur nulle Pourquoi est-ce que je reçois "Reducer retourné indéfini pendant l'initialisation" en dépit de fournir initialState à createStore ()? Bibliothèque JavaScript similaire à Imagemagick (c.-à-d. Redimensionner des images et des images tout en maximisant la fidélité d'image)? Injection de dépendance JavaScript Comment envoyer un fichier à partir de l'URL distante comme réponse GET dans l'application Node.js Express? Table ASCII où le champ peut avoir des lignes nouvelles Comment faire glisser du texte et des images de gauche à droite avec effet glissant Ng-repeat in repeat ne répète pas l'objet anéché angulaire Ctrl + S preventDefault dans Chrome

Swap d'image sur simple clic Javascript

J'essaie d'utiliser Javascript pour échanger une image, jusqu'à présent, je peux l'obtenir de A à B, mais pas en arrière.

Voici ce que j'utilise pour créer un échange: 

<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>

Ceci échange l'image 1 vers l'image 2, assez simple. Mais je veux pouvoir revenir à l'image 1 en cliquant sur la nouvelle image 2. J'ai essayé d'utiliser ceci: 

 <img src="pic1.png" name="pic" onclick=" if (window.document.pic.src='pic1.png'){ window.document.pic.src='pic2.png'; } else if (window.document.pic.src='pic2.png'){ window.document.pic.src='pic1.png'; }"/>

Il ne semble pas fonctionner dans ce cas. Il va passer à pic2, mais ne pas revenir à pic1. Est-ce quelque chose à voir avec onclick? Mes déclarations if? Merci

Dans votre code, le problème est lors de l'alerte window.document.pic.src son impression comme http: //localhost/pic1.png et vous êtes alors utilisez condition si (window.document.pic.src == 'pic1.png ') Comment est-il vrai. essaye ça 

 <script type="text/javascript"> function test() { alert(window.document.pic.src); //alert msg print like http://localhost/test/pic1.png if (document.pic.src=='http://localhost/test/pic1.png'){ document.pic.src='pic2.png'; } else if (document.pic.src=='http://localhost/test/pic2.png'){ document.pic.src='pic1.png'; } } </script> <img src="pic1.png" name="pic" onclick="test()"/>

Essayez ce truc simple … facile à entretenir. 

 <script> var onImg= "on.jpg"; var offImg= "off.jpg"; </script> <img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>

Mauvaise utilisation de == dans si condition 

 if (window.document.pic.src == 'pic1.png'){ window.document.pic.src='pic2.png'; } else if (window.document.pic.src =='pic2.png'){ window.document.pic.src='pic1.png'; }"/>

  1. window.document.pic.src='pic1.png' affecte pic1.png sur le côté gauche. Il ne se compare PAS.

  2. Bien que n'étant pas directement pertinent, essayez de ne pas accéder aux éléments par leur nom à l'échelle mondiale. Utilisez leur id .

  3. Votre javascript ne devrait pas se trouver dans l'onclick. Il devrait être dans une function javasctipt

Combiné:

L'étiquette img: 

 <img src="pic1.png" name="pic" id="pic" onclick="swap()"/>

Le javascript 

 <script> function swap() { if (document.getElementById("pic").src.endsWith('pic1.png') != -1) //==:Comparison { document.getElementById("pic").src = "pic2.png"; //=:assignment } else if (window.document.pic.src.endsWith('pic2.png') != -1) { document.getElementById("pic").src = "pic1.png"; } } </script>

Votre code fait ce que font les lignes ci-dessous, il ne va pas dans un bloc if else , donc si vous supprimez votre bloc if else , le code fonctionnera toujours, car sur le clic de la souris, il définit la valeur de src comme 'pic2.png' Qui était «pic1.png» plus tôt, et lorsque vous cliquez à nouveau parce que c'est déjà pic2.png, il reste le même. 

 <html> <head> <script type="text/javascript"> function swap() { window.document.pic.src='pic2.png'; } </script> </head> <body> <img src="pic1.png" name="pic" onclick="swap()"> </body> </html>

Vous pouvez essayer cela. 

 <html> <head> <title>Swapping Images</title> </head> <body> <img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/> </body> </html> <html> <head> <script> function change () { var img=document.getElementById("myimg"); if (img.src === "img1") img.src="img2.jpg"; else img.src="img1.jpg"; } </script> </head> </html>