A voir également:
- Changer d'image avec un clique
- Changer d'image en cliquant javascript ✓ - Forum - Javascript
- Changer d'image au clique ✓ - Forum - Java
- Changer image lors du clique sur un bouton ✓ - Forum - Webmaster
- Changement d'image en cliquant: problème! ✓ - Forum - Javascript
- Changer taille image html ✓ - Forum - Internet / Réseaux sociaux
5 réponses
jordane45
- Messages postés
- 31042
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 16 janvier 2021
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
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
henri
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>
jordane45
- Messages postés
- 31042
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 16 janvier 2021
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
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; } }
henri
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?
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?
jordane45
- Messages postés
- 31042
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 16 janvier 2021
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.
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.
henri
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...
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?
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?
henri
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.
Avez-vous encore une fois une idée du petit problème?
<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?
jordane45
- Messages postés
- 31042
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 16 janvier 2021
Oula.. je ne suis pas bien réveillé ...
On reprend...
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; } }