CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

JavaScript : Superposition des attributs "onmouseout" et "onclick"

RaphaJulia2906
RaphaJulia2906
Niveau 1
13 août 2023 à 18:12:44

Bonjour, je viens demander de l'aide ici en dernier recours car mes demandes sur les autres forum ne mon absolument pas aidées voila mon problème :
Je ne connais presque pas le JavaScript mais il me faut absolument ce script au plus vite seulement quelque chose ne marche pas :

<img class="like" height="25" src="/page/logo/like.png" onmouseover="javascript:this.src='/page/logo/like2.png';" onmouseout="javascript:this.src='/page/logo/like.png';" onclick="javascript:this.src='/page/logo/like3.png';"/>

Le problème est donc que tout marche bien mais lorsque que je clique sur l'image celle ci deviens bien "like3.png" mais lorsque je retire ma souris elle redeviens logiquement "like.png" que faire ?

Merci d'avance

mynameisflash
mynameisflash
Niveau 12
13 août 2023 à 20:39:25

Le besoin n'est pas très clair, tu dis ce que fais ton code actuellement et que c'est pas ce que tu veux sans dire ce que tu veux que ça fasse.
Tu veux que après avoir clické, le onMouseOut remette l'image like3 au lieu de like ? Et donc mouseOver et mouseOut vont faire s'alterner like2 et like3 ?
Si c'est ça :
<img class="like" height="25" src="/page/logo/like.png" onmouseover="javascript:this.src='/page/logo/like2.png';" onmouseout="javascript:if(this.classList.contains('clicked')) this.src='/page/logo/like3.png'; else this.src='/page/logo/like.png';" onclick="javascript:this.classList.toggle('clicked');this.src='/page/logo/like3.png';"/>

Explication: T'as besoin d'un état pour savoir que t'as cliqué sur l'image, ça se traduit par l'ajout de la classe 'clicked' sur l'image. Donc quand tu fais mouseOut tu peux vérifier si la classe est présente ou non pour savoir quoi mettre dans src.
Ici j'utilise classList.toggle pour pour pouvoir annuler le premier click si tu cliques de nouveau mais c'est peut-être pas ça ton besoin, je ne fais que des suppositions. Tu peux remplacer classList.toggle par classList.add si tu veux que le cliq soit définitif

Message édité le 13 août 2023 à 20:40:12 par mynameisflash
mynameisflash
mynameisflash
Niveau 12
13 août 2023 à 20:56:23

<img class="like" height="25" src="/page/logo/like.png"
onmouseover="javascript:this.src='/page/logo/like2.png';" 
onmouseout="javascript:if(this.classList.contains('clicked')) this.src='/page/logo/like3.png'; else this.src='/page/logo/like.png';" 
onclick="javascript: if(this.classList.contains('clicked')) this.src='/page/logo/like.png'; else  this.src='/page/logo/like3.png'; this.classList.toggle('clicked')"/>

ça marche mieux comme ça.

Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Création de sites web
  • Programmation
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment