Changer d'image avec un clique

Résolu

Javascript

henri -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 19 déc. 2020 à 14:22

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

A voir également:

Javascript changer image onclick
Changer dns - Guide
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
Changer carte graphique - Guide
Image iso - Guide
Changer wifi chromecast - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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

<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?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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.

<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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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;
  }
}

Discussions similaires

Calculer somme valeur tableau javascript

utiliser javascript pour récupérer une valeur dans un fichier txt

Afficher des caractères spéciaux

connexion par autre robot

Nombre générés entre 1 et 100

Barre de recherche en html externe

Votre réponse

Discussions similaires