Changer d'image avec un clique [Résolu]

Signaler
-
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 -
Bonjour,
je travaille en html et ccs je n'ai pas encore eu le temps de trop explorer le java.
je souhaite que dès que je clique sur une image elle se transforme en une autre puis si je reclique une autre et cela 7 fois c'est possible?
si non juste changer une fois en gros sois c'est une image sois c'est l'autre a chaque fois que je clique dessus.
merci
Afficher la suite

5 réponses

Réponse 1 / 5
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 3 182
Bonjour,

Alors ne perds pas ton temps à explorer Java .... par contre, intéresses toi à javascript ( Java et Javascript sont deux langages différents ! )
car oui, Javascript sera la solution.....

Nous ne te donnerons pas du code tout cuit.. par contre on veut bien t'aider à améliorer/corriger le code que tu auras réalisé.

Commence par t'intéresser à l'évènement onclick
https://www.w3schools.com/jsref/event_onclick.asp

Et ensuite, regarde comment modifier le src d'une image
https://www.w3schools.com/jsref/prop_img_src.asp

Rien que ça.. ça devrait te donner un bon début pour écrire ton code...



Reviens nous voir avec le code que tu auras essayé de faire, et là on verra pour te venir en aide.


NB: Pour poster ton code sur le forum, tu devras utiliser les BALISES DE CODE.
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Réponse 2 / 5

voici le code que j'ai essayer, le probleme est que des le premiere clique l'image afficher est box4 alors que je voudrai qu'avec un clique ça passe à la box 2 puis un autre clique à la box3 ect... 
<code html>

 <p> <img class=box id=myimg1 src="../images/box1.png" onclick="ch_img(this)" > 
     cette image dois changer de couleur 7 fois</p>
 
 <script>
 var x = 1;
        function ch_img(x) {
   if (x.value=1){
       document.getElementById("myimg1").
       src = "../images/box2.png";
       var x = 2;}
    
   if  (x.value=2){
         document.getElementById("myimg1").
         src = "../images/box3.png";
         var x = 3;}
    if  (x.value=3){
        document.getElementById("myimg1").
        src = "../images/box4.png";
        var x = 4;}
             
  }
    
    </script>
Signaler
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 3 182
Essaye de voir la logique dans ton code ....
Ton premier IF vérifie si W=X == 1 .. la réponse est oui....
Et donc... tu incrémentes X
Puis tu testes si X == 2 ... ben.. maintenant oui.. puisqu'il est passé dans le premier if
et donc X est de nouveau incrémenté ...
Et ainsi de suite... jusqu'à ton dernier IF ..

N'as tu pas appris qu'il existe des ELSEIF ou mieux, au lieu de faire un IF .. utiliser un SWITCH
Mais il y a encore plus simple, vu que tes images ont toutes le même nom (sauf le chiffre qui change)

Tu pourrais donc faire 
var x = 2;
function ch_img(x) {
  
  document.getElementById("myimg1").
    src = "../images/box"+x+".png";
  x++;
//Si on est arrivé à la quatrième image, on retourne à la première
  if(x>=4){
    x=1;
  }
}
Réponse 3 / 5

Merci beaucoup pour cette réponse,
Le programme semble marcher mais il y a un problème à partir du 1er clique une image s'affiche mais celle qui montre qu'elle ne charge pas.
j'ai bien vérifier l'emplacement de mes images et de leur noms mais ça ne fonctionne toujours pas avez-vous une idée de la raison?
Signaler
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 3 182
C'est certainement que le chemin vers tes images ne sont pas bonnes.
Assures toi de la syntaxe sur le nom de tes fichiers. Qu'il soit strictement identique au code ( majuscules/minuscules/ espaces ... )
Utilises également les outils de ton navigateur pour voir ce que contient réellement ton navigateur ( en faisant un clic droit sur l'image par exemple, puis tu sélectionnes (selon le navigateur) examiner ou inspecter.
N'hésites pas non plus à ajouter des console.log des variables dans ton code js et à regarder dans la console de ton navigateur ce que ça t'affiche.
Réponse 4 / 5

bonjour,
oui j'ai bien vérifier plusieurs fois le chemins et le nom des images et elles sont correct de plus quand je remplace ma variable par un chiffre entre 1 et 7 l'image s'affiche belle et bien.
voila ce que ça donne quand je l'inspecte... 
<img class="box" id="myimg1" src="../images/box[object HTMLImageElement].png" onclick="ch_img(this)">

je pense donc que c'est un problème qui vient de la variable directement. Elle ne dois pas être du bon "type".
pourrez vous m'éclairer sur ce petit problème?
Signaler
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 3 182
Je n'avais pas vu.. le souci se trouve là 
onclick="ch_img(this)"

A corriger par 
onclick="ch_img(this.value)"
Réponse 5 / 5

Il y a toujours le même problème d'affichage qu'avant mais cette fois la source de l'image est différente et x est noté comme undefined. 
<img class="box" id="myimg1" src="../images/boxundefined.png" onclick="ch_img(this.value)">

Avez-vous encore une fois une idée du petit problème?
Signaler
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
 3 182
Oula.. je ne suis pas bien réveillé ...
On reprend... 

<img class="box" id="myimg1" src="../images/boxundefined.png" onclick="ch_img()">



var x = 2;
function ch_img(){
  
  document.getElementById("myimg1").
    src = "../images/box"+x+".png";
  x++;
//Si on est arrivé à la quatrième image, on retourne à la première
  if(x>=4){
    x=1;
  }
}
Répondre Posez votre question