Partage

Simple alternance de deux images

22 juin 2015 à 12:17:28

Alors voilà,

je voudrais réaliser un simple swap entre deux images à chaque clique sur l'image

Je me dis c'est simple je vais faire ça en JS

Mais j'ai quelque soucis, je vous file d'abord le petit code :

function swap() {

		if(this.src == "images/icone/RECORD_1.svg") {

			document.getElementById("ic_record").src = "images/icone/RECORD_0.svg";

		} else {

			this.src = "images/icone/RECORD_1.svg";

		}

	}


<img class='ic' id='ic_record' alt='' src="images/icone/RECORD_1.svg" title='record' onclick="swap()">

Mes deux images sont donc : images/icone/RECORD_0.svg et images/icone/RECORD_1.svg

Et là le soucis actuel, c'est qu'il faut cliquer deux fois sur l'image pour passer à RECORD_0, et après ça ne marche plus et je peux plus changer l'image, donc ça marche qu'une seule fois

J'ai essayé également comme ça :

function swap() {

		if(this.src == "images/icone/RECORD_1.svg") {

			document.getElementById("ic_record").src = "images/icone/RECORD_0.svg";

		} else if(this.src == "images/icone/RECORD_0.svg") {

			document.getElementById("ic_record").src = "images/icone/RECORD_1.svg";

		}

	}

Mais là ça ne fonctionne carrement pas

Donc si quelqu'un à une idée du pourquoi du comment, je suis preneur

-
Edité par bernardalexis72 22 juin 2015 à 12:36:37

W.Lawson's

22 juin 2015 à 15:21:13

Bonjour.

function swap(X)
     {
     if ( X.src == "images/icone/RECORD_1.svg" )
          X.src = "images/icone/RECORD_0.svg" ;
     else
          X.src = "images/icone/RECORD_1.svg" ;
     }
 
<img src="images/icone/RECORD_1.svg" onclick="swap(this)">

-
Edité par W.Lawson's 22 juin 2015 à 15:23:19

bernardalexis72

22 juin 2015 à 17:25:35

Aucunes réactions du navigateur, pas d'erreurs, rien :/

W.Lawson's

22 juin 2015 à 17:37:06

Code testé avec 2 images pompées sur la toile !...

<!doctype html>
<html><head>
     <script type="text/javascript">
     function swap(X)
     {
     if ( X.src == "http://www.detourafrica.co.za/images/photos/Yawning-hippo.jpg" )
          X.src = "http://www.way-away.com/imagenes/dia-5-kenya-lake-nakuru-3jpg_a__196.jpg" ;
     else
          X.src = "http://www.detourafrica.co.za/images/photos/Yawning-hippo.jpg" ;
     }
     </script>
</head><body>
     <h1>click sur image !</h1>
     <img src="http://www.detourafrica.co.za/images/photos/Yawning-hippo.jpg"
             onclick="swap(this)">     
</body></html>

Fonctionne tout navigateur confondu !...

-
Edité par W.Lawson's 22 juin 2015 à 18:17:54

bernardalexis72

23 juin 2015 à 9:17:41

Effectivement le code fonctionne, mais quand je remplace par des images de mes répertoires "images/icone" le swap de fonctionne plus, et je n'ai aucunes erreurs dans le log..

EDIT : je viens de comprendre un truc, la fonction ne rentre jamais dans le if, tout le temps dans le else

-
Edité par bernardalexis72 23 juin 2015 à 9:24:18

W.Lawson's

23 juin 2015 à 10:25:33

Avez vous bien écrit onclick="swap(this)" afin de passer l'objet 'image' à votre fonction ?...

Mais aussi, function swap(variable_à_votre_convenance) { . . . } afin de recevoir et de traiter cet objet...

-
Edité par W.Lawson's 23 juin 2015 à 10:30:37

bernardalexis72

23 juin 2015 à 10:30:40

Oui oui evidemment

Actuellement j'ai fait ça pour tester :

function swap(X) {

				if ( document.getElementById("test").src == "images/icone/RECORD_1.svg" )
		 			document.getElementById("test").src = "images/icone/RECORD_0.svg" ;
				else if( document.getElementById("test").src == "images/icone/RECORD_0.svg" )
		  			document.getElementById("test").src = "images/icone/RECORD_1.svg" ;
				else 
		  			document.getElementById("test").src = "images/csvFile.svg";

			}


<img id="test" src="images/icone/RECORD_1.svg" onclick="swap(this)">

Et comme dis précédemment, quand je clique sur l'image, il passe direct à csvFile.svg, comme si les if n'était pas bon alors que pourtant..

W.Lawson's

23 juin 2015 à 10:40:14

Il semble que l'attribut "src" contienne aut'chose !... ( peut être faudrait t-il le vérifier via un alert )

J'ai déjà été confronté à cela, mais je ne me souviens plus de l'erreur que je commettais....

EDIT : je me souviens maintenant, faites un alert de l'attribut "src" vous aurez une belle surprise !...
C'est un problème de chemin !... Mon code fonctionne car la donne est différente avec des url absolues...

-
Edité par W.Lawson's 23 juin 2015 à 11:00:50

bernardalexis72

23 juin 2015 à 10:48:09

En mettant l'alert dans le head j'ai effectivement une erreur comme quoi src est null ( cannot read property 'src' of null )

En mettant le script derrière l'image j'obtiens le même résultat, on tombe direct dans le else

W.Lawson's

23 juin 2015 à 10:54:34

Non !...
Il faut faire l'alert dans la fonction swap() !... En 1ère instruction de la fonction !... Et ce afin de visualiser l'attribut "src"

alert( document.getElementById('test').src) ;

Vous laissez votre page s'afficher, et vous cliquez sur l'image, afin de déclencher l'alert !....

-
Edité par W.Lawson's 23 juin 2015 à 10:58:19

bernardalexis72

23 juin 2015 à 11:08:42

Ok ça fontionne bien avec le chemin absolu, ça m'embête un peu car cela va être quelque chose d'embarqué donc le chemin ne sera pas pareil tout le temps, mais j'essairai de trouver une solution

Merci à toi en tout cas, et bonne journée

-
Edité par bernardalexis72 23 juin 2015 à 11:11:00

W.Lawson's

23 juin 2015 à 12:40:23

Il faut tester uniquement la fin du chemin !... i.e : Le nom de l'image et pas le reste...
Donc faire un substring de ce qui se trouve derrière le dernier "\" de la chaine...

function swap(X)
     {
     index = X.src.lastIndexOf("\") ;
     myImage = X.src.substring(index+1);

     if ( myImage == "RECORD_1.svg" )
          X.src = "images/icone/RECORD_0.svg" ;
     else
          X.src = "images/icone/RECORD_1.svg" ;
     }

ça devrait le faire !...

-
Edité par W.Lawson's 23 juin 2015 à 13:42:21

bernardalexis72

23 juin 2015 à 14:11:16

Re-bonjour,

oui merci, c'est exactement ce que j'ai fait

bernardalexis72

24 juin 2015 à 12:29:17

Me revoilà

C'est juste pour une petite question

Est-ce que tu sais si c'est possible d'ajouter un événement onclick quand je change l'image ?

C'est-à-dire que, au début j'ai

<img id="test"src="images/icone/RECORD_1.svg"onclick="swap(this); chrono()">

Et quand je clique dessus ça devient :

<img id="test"src="images/icone/RECORD_0.svg"onclick="swap(this); startRecord()">

Merci de ta réponse

-
Edité par bernardalexis72 24 juin 2015 à 13:24:56

W.Lawson's

24 juin 2015 à 13:52:19

Bonjour.
Je ne suis pas sûr de moi, mais peut être en faisant ainsi :

X.onclick = function(){ swap(this); startRecord(); };

A tester !

LeoSrz

24 juin 2015 à 14:09:14

Cette fonction Marche Parfaitement; sinon change de navigateur.

function swap(X) {
  if ( X.src == "image1" )
     X.src = "image2" ;
  else
     X.src = "image1" ;
}

HTML:

<img src="image1" onclick="swap(this)"/>

L'image change lors du clique, et re-change lors d'un second clique

Intégrateur HTML/CSS, maîtrise de JADE et STYLUS, travaille beaucoup sur le framework BOOTSTRAP

bernardalexis72

24 juin 2015 à 14:41:50

@W.Lawson's : Oui effectivement ça fonctionne juste comme ça, j'aurai dû essayer avant, merci à toi

Et merci @XdarlLeo mais on avait trouvé le pourquoi du comment