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

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Fonction onmouseover

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Fonction onmouseover

n°2329338
sophie_smi​it
Posté le 18-02-2019 à 13:13:58  profilanswer
 

Bonjour,  
J'aimerais que lorsque la souris survole une image 1 celle ci change en une image 2. Une fois que la souris n'est plus sur l'image 2 celle ci redevient l'image 1.  
 
Ici mon image 1 est "image.jpg" et mon image 2 est "singe.jpg".  
 
Dans mon html j'ai mis :  
 
   <img src="image.jpg" id="bigImage" > <br>
   <a onmouseover="changeImage('image.jpg')" > </a>
   <a onmouseover="changeImage('singe.jpg')" >  </a>
 
Dans mon js j'ai mis :  
 
function changeImage(img){
document.getElementById('bigImage').src=img;
}
 
Pourtant cela ne fonctionne pas, avez-vous une idée pourquoi et comment rectifier ?  
 
Merci

mood
Publicité
Posté le 18-02-2019 à 13:13:58  profilanswer
 

n°2329339
the_shuff
Posté le 18-02-2019 à 13:20:48  profilanswer
 

pfiou... passe a jquery :)
 

Code :
  1. <img src="image.jpg" id="bigImage" data-in="image.jpg'" data-out="signe.jpg" >


Code :
  1. Jquery('#bigImage').mouseenter(fucntion(){
  2. jQuery(this).attr('src',jQuery(this).data('in'));
  3. }).mouseleave(function(){
  4. jQuery(this).attr('src',jQuery(this).data('out'));
  5. });

n°2329340
Neji Hyuga
:grut:
Posté le 18-02-2019 à 13:34:27  profilanswer
 

Ce sujet a été déplacé de la catégorie Hardware vers la categorie Programmation par Neji Hyuga


---------------
Le Topic Unique des collections de cartes graphiques - GPUCHAN.ORG
n°2329342
David Bori​ng
Posté le 18-02-2019 à 14:55:16  profilanswer
 

Ton javascript est correct, le problème vient du HTML je pense.
tes deux <a> ont seulement 1px, et donc je ne pense pas que tu passes dessus avec ta souris.
 
Tu pourrais faire un codepen, cela sera plus simple pour t'aider.  
Si tu regarde la source de l'image avec l'inspecteur, tu peux te rendre compte que elle change selon le hover sur un des liens
https://codepen.io/anon/pen/dawEMZ

n°2329386
sophie_smi​it
Posté le 19-02-2019 à 08:48:34  profilanswer
 

Merci pour vos réponses.  
Au final, j'ai fait ainsi :  
 
dans le html :  
 
<img src="image.jpg" id="bigImage" onmouseover="changeImage(this,1)" onmouseout ="changeImage(this,2)" >  
 
dans le js :  
 
function changeImage(x,y){
  if (y==1){
  x.src="singe.jpg" ;
}
  else   {x.src="image.jpg" ;
      }
}
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Fonction onmouseover

 

Sujets relatifs
Comment passer une variable dans une fonction ??Copier des données en fonction de critère
Fonction recherchev vba erreur indiceArret fonction VBA
fonction pour gerer les erreurs d'exceptionincrémentation auto vba excel en fonction de plusieurs cellules
opimisation de la fonction soundexFonction Onmouseover
décalage image lors de la fonction onmouseover/onmouseout[JAVASCRIPT] onmouseover décrit dans la fonction ...
Plus de sujets relatifs à : Fonction onmouseover


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