Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
898 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2192085
rinimi
La vie est une passerelle
Posté le 29-05-2013 à 14:20:06  profilanswer
 

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
mood
Publicité
Posté le 29-05-2013 à 14:20:06  profilanswer
 

n°2192087
flo850
moi je
Posté le 29-05-2013 à 14:27:15  profilanswer
 

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


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

n°2192088
rinimi
La vie est une passerelle
Posté le 29-05-2013 à 14:41:22  profilanswer
 

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.

n°2192089
flo850
moi je
Posté le 29-05-2013 à 14:45:51  profilanswer
 

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(){
 
}),


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

n°2192094
rinimi
La vie est une passerelle
Posté le 29-05-2013 à 14:55:04  profilanswer
 

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?

n°2192099
gatsu35
Blablaté par Harko
Posté le 29-05-2013 à 15:10:36  profilanswer
 

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
n°2192683
rinimi
La vie est une passerelle
Posté le 04-06-2013 à 09:43:45  profilanswer
 

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

n°2192684
gatsu35
Blablaté par Harko
Posté le 04-06-2013 à 09:51:39  profilanswer
 

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
n°2192688
rinimi
La vie est une passerelle
Posté le 04-06-2013 à 10:04:14  profilanswer
 

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.

n°2192691
gatsu35
Blablaté par Harko
Posté le 04-06-2013 à 10:17:09  profilanswer
 

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
mood
Publicité
Posté le 04-06-2013 à 10:17:09  profilanswer
 

n°2192695
rinimi
La vie est une passerelle
Posté le 04-06-2013 à 10:35:28  profilanswer
 

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

n°2192700
flo850
moi je
Posté le 04-06-2013 à 10:56:39  profilanswer
 

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

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

n°2192702
rinimi
La vie est une passerelle
Posté le 04-06-2013 à 11:08:44  profilanswer
 

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
n°2193497
rinimi
La vie est une passerelle
Posté le 10-06-2013 à 11:37:16  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Problème jQuery.ajax( et phpproblème FFT sous codeblocks
Effet filter sur une imageProbleme survenue sur mon site wordpress
Problème importationprobleme langage C
Probleme d'iframeproblème d'enregistrement ds fichier TMP j'ai besoin d'aide
probleme avec jcarouselliteun problème dans un librairies dynamic
Plus de sujets relatifs à : Problème changement d'image lors d'un onclick


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR