Se connecter / S'enregistrer
Votre question

RESOLU JS comment afficher une image lorsque la souris passe sur un element

Tags :
  • Image et Son
  • CSS
  • Programmation
Dernière réponse : dans Programmation
20 Janvier 2013 00:46:05

SAlut a tous,


bon sa fait plusieurs demande que je pause en prog car je débute mais je suis a fond.

Voilà j'ai un site a faire et ma boss voudrais q'une image de bonhomme apparaisse quand on passe sur le menu (moche certe mais elle les veux) donc avec photoshop j'ai fait un rendu de se qu'il faut mais je ne sais pas comment le faire sur le site ... et c'est la que je demande votre aide :) 


voilà déja l'image du résultat lorsque passe la souris



il faut savoir que je taf avec des tableaux pour la structure du site


  1. <body onLoad="document.formulaireinscription.nomvacancier.focus();" class='background'>
  2.  
  3.  
  4.  
  5. <!--------------- entete --------------------------------------------------------------------------------
  6. ------------------------------------------------------------------------------------------------------->
  7. <img src='.\photo\entete2.png' align='center' />
  8. <table cellspacing='0' height='100%' width='50%'>
  9.  
  10.  
  11.  
  12. <tr>
  13.  
  14. <!------------------MENU-------------------------------------------------->
  15. <td width='10%' class='menu' align='center' valign='top' bgcolor='#ffffff'>
  16.  
  17.  
  18. <br/><br/><br/><br/>
  19. <a href='accueil.html' class="lienpage"> Accueil</a><br/><br/><br/><br/>
  20. <a href='formulaire.html' class="lienpage">Formulaire d'inscription</a> <br/><br/><br/><br/>
  21. <a href='reservation.html' class="lienpage"S>Réserver</a> <br/><br/><br/><br/>
  22. <br/><br/><br/><br/> page 3
  23. <br/><br/><br/><br/> page 4
  24. <br/><br/><br/><br/> page 5
  25. </td><td width='5px'> </td>
  26. <!---------------------fin menu------------------------------------------------>



Je vous remercie par avance
Cordialement
Parole-sage

Autres pages sur : resolu afficher image souris passe element

a c 232 L Programmation
20 Janvier 2013 15:29:49

Salut,

L'image doit apparaître où ?
En CSS tu ferais ça avec du hover, par exemple :
  1. a:hover { background-image:url(/images/image.jpg); }

20 Janvier 2013 20:10:37

oui sa je m'en douter sa me paraissait le mieux mais je ne sais pas trop comment placer une image exctament ou on veux tu vois pour la placer sur le bord du menu. a en effet l'image que j'avais upload sur casimage n'as pas aparue donc je penser faire un div de la taille de mon menu (en % si possible pour que sa passe sur tout type d'écran) et le mettre en premier plan mais je ne sais pas du tout comment faire

en fait faut que sa ressemble a ça quand la souris passe sur le menu :

http://nsa30.casimages.com/img/2013/01/20/1301200810513...

E D I T :

bon j'ai placer le bonhomme ou je veux j'ai essayer sa en js mais sa ne fonctionne pas alors que je penser que sa irais :) 

  1. <body onLoad="document.formulaireinscription.nomvacancier.focus();" class='background'>
  2.  
  3.  
  4. <!--------------- entete --------------------------------------------------------------------------------
  5. ------------------------------------------------------------------------------------------------------->
  6. <img src='.\photo\entete2.png' align='center' />
  7.  
  8.  
  9. <table cellspacing='0' height='100%'>
  10.  
  11. <tr>
  12.  
  13.  
  14. <tr> <td> <img src="photo\bonhomme.png" /></td></tr>
  15. <!------------------MENU-------------------------------------------------->
  16. <td width='10%' class='menu' align='center' valign='top' bgcolor='#ffffff'>
  17.  
  18.  
  19. <br/><br/><br/><br/>
  20. <a href='accueil.html' class="lienpage"> Accueil</a><br/><br/><br/><br/>
  21. <a href='formulaire.html' class="lienpage">Formulaire d'inscription</a> <br/><br/><br/><br/>
  22. <a href='reservation.html' class="lienpage"S>Réserver</a> <br/><br/><br/><br/>
  23. <br/><br/><br/><br/> page 3
  24. <br/><br/><br/><br/> page 4
  25. <br/><br/><br/><br/> page 5
  26. </td><td width='5px'> </td>
  27. <!---------------------fin menu------------------------------------------------>
Contenus similaires
a c 232 L Programmation
20 Janvier 2013 21:49:29

Modifie l'image de ton bonhomme :
  1. <img id="photoBonhomme" src="photo\bonhomme.png" style="display:none;" />


Et modifie ton lien accueil :
  1. <a href='accueil.html' class="lienpage" onmouseover="document.getElementById('photoBonhomme').style.display = 'block';" onmouseout="document.getElementById('photoBonhomme').style.display = 'none';">
20 Janvier 2013 23:54:55

en effet sa le fait bien apparaitre (j'ai pas tout compris pourquoi) mais le probleme c'est que sa me fait bouger mon menu il y a pas moyen de le placer dans un div ou un truc qui n'a pas de rapport avec le tableau pour pas que sa décale tout (en tout cas merci beaucoup de m'aider j'ai encore un peu de mal mais sa viendra)
a c 232 L Programmation
21 Janvier 2013 20:52:03

Met avec de la visibility sinon.

Le même code :
  1. <img id="photoBonhomme" src="photo\bonhomme.png" style="visibility:hidden;" />


  1. <a href='accueil.html' class="lienpage" onmouseover="document.getElementById('photoBonhomme').style.visibility = 'visible';" onmouseout="document.getElementById('photoBonhomme').style.visibility = 'hidden';">


Et ça devrait être bon.

Sinon pour expliquer ce que ça fait :
id="photoBonhomme" = donne un ID à ton image pour pouvoir être réutilisé
style="visibility:hidden;" = dit que par défaut ton image doit être cachée
onmouseover="" = évènement qui se produit lorsque ta souris est sur l'élément (le lien en l'occurence)
onmouseout="" = même chose mais lorsque la souris sort de l'élément (lien)
document.getElementById('photoBonhomme').style.visibility = définit la visibilité de l'élément qui a pour ID "photoBonhomme" que l'on a défini plus haut.
21 Janvier 2013 21:47:25

YEAH OK OK j'ai compris c'est super cool je vous remercie beaucoup beaucoup !!!!

je met le RESOLU merci a vous
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS