Problème changement d'image lors d'un onclick

Problème changement d'image lors d'un onclick - HTML/CSS - Programmation

Marsh Posté le 29-05-2013 à 14:20:06    

Bonjour.
Je fais appelle à vous pour un problème qui me triture la tête depuis une ou deux heures...
En fait, ce que je veux faire est plutôt simple, lorsque l'on clique sur mon image, je veux que celle-ci change pour une autre, et lorsque je re-clique encore une fois dessus, que l'image d'avant revienne.
 
Sur mon code actuel, lors du premier clic l'image se change en la deuxième, mais lors du deuxième clique, elle reste avec la deuxième image, et ne retourne pas sur la première comme je le souhaiterais.
 
J'ai regardé plusieurs sujet de ce forum, mais aucun ne m'a réellement aidé, donc je vous pose mon JS ainsi que mon action HTML:
 

Code :
  1. function changer_image(monimage)
  2. {
  3. if (window.document.monimage.src='../images/boutonsplus.png')
  4. {
  5.  window.document.monimage.src='../images/boutonmoins.png';
  6. }
  7. else if (window.document.monimage.src='../images/boutonmoins.png')
  8. {
  9.  window.document.monimage.src='../images/boutonsplus.png';
  10. }
  11. }


Code :
  1. <strong><h3><img src="../images/boutonplus.png" name="monimage" onclick="changer_image;">Préparation</h3></strong>


 
Merci beaucoup aux personnes qui sauront m'aider et me débloquer à cette endroit ...


Message édité par rinimi le 29-05-2013 à 14:22:51
Reply

Marsh Posté le 29-05-2013 à 14:20:06   

Reply

Marsh Posté le 29-05-2013 à 14:27:15    

Code :
  1. if( a ==2) // pour testser si a vaut deux
  2. if(a=2) //pour stocker la valeur 2 dans a et vérifier si le resultat s'eavlue a true


---------------

Reply

Marsh Posté le 29-05-2013 à 14:41:22    

Je viens de rectifier cette erreur, en effet j'avais oublié un "==" dans la condition, mais cela ne change rien au problème, toujours pas de changement d'image.

Reply

Marsh Posté le 29-05-2013 à 14:45:51    

onclick="changer_image()"
 
Au passage il y a moyen de faire bien plus propre, par exemple avec un peu de jquery et un binding de l'evenement click :  
$('img[name=monimage]').click( function(){
 
}),


---------------

Reply

Marsh Posté le 29-05-2013 à 14:55:04    

Je ne sais pas procéder de cette manière, donc j'ai essayé de faire la facilité..
 
En dehors de ça, ce n'était pas à cause des '()' manquantes. Je ne vois vraiment pas la cause du dysfonctionnement :/
 
Je me demande si il n'y a pas une façon simple de faire cela avec simplement du CSS?

Reply

Marsh Posté le 29-05-2013 à 15:10:36    

Ben si, les guillemets manquants empêchent la fonction de se lancer  
et puis document.monimage c'est du vieux vieux code, et puis on teste pas le SRC comme ça car selon le navigateur il peut changer


---------------
Blablaté par Harko
Reply

Marsh Posté le 04-06-2013 à 09:43:45    

C'est bon, j'ai réglé mon problème de changement d'image seule !  
 
Par contre, lorsque je suis sur la même ligne de mon onclick, mais que je ne clique pas sur l'image, j'aimerais que celle-ci se change quand même. Aurait-il un moyen (simple si possible) de permettre cela ?
 
Merci d'avance pour vos futurs réponses.
 
(En réponse à Gatsu, non ce n'était pas à cause des guillemets que la fonction ne marchait pas, et j'ai appris de cette façon donc, je continue avec la façon dont j'ai appris, je me renouvellerais plus tard.)

Reply

Marsh Posté le 04-06-2013 à 09:51:39    

oui les parentheses en fait :)
Si tu fais :  
onclick="mafonction"
Ben il ne se produira rien du tout, il faut mettre les parentheses pour appeler ta fonction.
 
Il en est ou ton code maintenant du coup, histoire qu'on te dise si c'est bien :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 04-06-2013 à 10:04:14    

Mes images se changent comme il faut.
La première se change en la deuxième lorsque je clique dessus, et vise versa quand je clique sur la deuxième image, elle repasse sur la première.
 
Maintenant, ce que je veux, c'est juste lorsque que je clique sur la même ligne que cette image (mais pas sur l'image donc), et que cela permette de la changer quand même.

Reply

Marsh Posté le 04-06-2013 à 10:17:09    

je te demandais pas comment ça marche, je te demandais de poster la dernière version de ton code, car si tu veux qu'on réponde à ta question tu postes ton code :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 04-06-2013 à 10:17:09   

Reply

Marsh Posté le 04-06-2013 à 10:35:28    

Je suis passée par la lib Jquerry, et cela marche très bien, voilà le code :

Code :
  1. $(function(){
  2.   $(".img-swap-ingr" ).live('click', function() {
  3.     if ($(this).attr("class" ) == "img-swap-ingr" ) {
  4.       this.src = this.src.replace("_plus","_moins" );
  5.     } else {
  6.       this.src = this.src.replace("_moins","_plus" );
  7.     }
  8.     $(this).toggleClass("_plus" );
  9.   });
  10. });


 
Avec dans la page html

Code :
  1. <img src="../images/ingr_plus.png" class="img-swap-ingr"/>

 
 
Je te l'accorde, cela peut paraître très lourd de mettre une lib jq juste pour cela, mais en réalité, ça ne l'est pas tant, donc, très pratique ! (Sachant que je vais avoir besoin de la lib jq pour d'autre chose donc ! -> Je préfère prévenir, on m'a déjà fait le coup de "c'est trop lourd et inutile si c'est juste pour ça" )

Reply

Marsh Posté le 04-06-2013 à 10:56:39    

c'est mieux :love: . et puis jq te servira pour plein d'autres trucs ( au besoin les derniers versions sont modulable pour ne prendre que ce donty tu as besoin)

 

au lieu de class ==  , utilise plutot http://api.jquery.com/hasClass/
live est deprecated, utilise plutot on à la place

 

tu peux nous mettre un petit extrait du html ?


Message édité par flo850 le 04-06-2013 à 10:57:45

---------------

Reply

Marsh Posté le 04-06-2013 à 11:08:44    

Code :
  1. <ul id="menu" >
  2.     <li onclick="spoiler('spoiler1')" style="cursor: pointer;" class="none">
  3.      <strong class="s1Topic" ><img src="../images/ingr_plus.png" class="img-swap-ingr"/></strong>
  4.      <div class="Topic masque" id="spoiler1" style="visibility:hidden;display:none;"><hr>
  5.       texte caché/décaché
  6.      </div>
  7.     </li>
  8.    </ul>


 
Voilà mon code html.
On peut donc remarquer que mon bouton que lors des cliques + devient, - devient +, etc. Lorsque je clique dessus, cela m'appelle une fonction "spoiler" (vous devez connaitre, donc je n'argumenterais pas là dessus).
 
Je voudrais donc que toute ma ligne "li" avec le spoiler puisse avoir le changement d'image, et pas seulement l'image.


Message édité par rinimi le 04-06-2013 à 11:09:17
Reply

Marsh Posté le 10-06-2013 à 11:37:16    

Petit up, histoire de pas tomber dans les oubliettes, si quelqu'un aurait une solution, ça serait sympa !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed