Changer l'image au passage de la souris ?

Changer l'image au passage de la souris ? - HTML/CSS - Programmation

Marsh Posté le 20-01-2009 à 10:48:11    

Bonjour à tous.
Je suis en train de me rendre dingue  :pt1cable: ...
 
J'ai créé un menu tout simple, avec mes propres boutons.
 

Code :
  1. <style>
  3. /* ici cadre menu de gauche */
  4. .cadredumenugauche {
  5. float:left;
  6. text-align:left;
  7. margin-left: 5px;
  8. margin-top: 5px;
  9. margin-bottom: 5px;
  10. width: 150px;
  11. padding:10px;
  12. background-color:#c2c0c0;
  13. border:1px solid #000000; color:#666666;
  14. }
  15.   </style>
  17. <div
  18. style="font-weight: bold; margin-top: 5px; height: 45px; margin-right: 25px; margin-left: 0px; width: 925px; text-align: center;"
  19. class="cadredumenugauche">
  20. <img style="width: 135px; height: 40px;" alt=""
  21. src="http://www.jmr-whole.com/im/bouton/bouton1.jpg"><img
  22. style="width: 135px; height: 40px;" alt=""
  23. src="http://www.jmr-whole.com/im/bouton/bouton2.jpg"><img
  24. style="width: 100px; height: 40px;" alt=""
  25. src="http://www.jmr-whole.com/im/bouton/bouton3.jpg"><img
  26. style="width: 120px; height: 40px;" alt=""
  27. src="http://www.jmr-whole.com/im/bouton/bouton4.jpg"><img
  28. style="width: 135px; height: 40px;" alt=""
  29. src="http://www.jmr-whole.com/im/bouton/bouton5.jpg"><img
  30. style="width: 135px; height: 40px;" alt=""
  31. src="http://www.jmr-whole.com/im/bouton/bouton6.jpg"><img
  32. style="width: 100px; height: 40px;" alt=""
  33. src="http://www.jmr-whole.com/im/bouton/bouton7.jpg"></div>


Ce que j'aimerais, c'est que l'image des boutons change au passage de la souris...
(même chemin, rajouter _bis après l'adresse des boutons)
[ Exemple : http://www.jmr-whole.com/im/bouton/bouton1_bis.jpg ]
 
Je ne me rappelle plus trop quelle balise utiliser et surtout COMMENT !
Les tutos que j'ai lu sont pas assez clair pour que j'arrive à faire fonctionner ça :)
D'avance merci  :hello:  :hello:  :hello:  

Reply

Marsh Posté le 20-01-2009 à 10:48:11   

Reply

Marsh Posté le 20-01-2009 à 12:51:27    

Bonjour.
 
Premier point :
Vu que tu utilises une feuille de style, tu devrais y mettre toutes les informations de style :D  
 
Deuxième point :
Il est d'usage de mettre le menu dans une liste. Ce n'est pas juste par snobisme ou effet de mode, c'est aussi que du coup, au cas où quelqu'un naviguerait sans les effets de styles/ images (ou avec un navigateur oral), le menu coonserve une structure interprétée correctement - on appelle ça l'accessibilité...
Accessoirement, ça te permet de changer le style de ton menu juste en jouant sur quelques points dans le CSS...
 
Dans le CSS, justement, il y a une pseudo-classe qui fait pile-poil ce que tu cherches :
a:hover : décrit les liens quand on les survole.
A partir de là, la méthode est - relativement - simple :
1. Tu crées une image qui contiendra les deux états du menu.
Dans ton cas, elle fera 135px * 80px
en haut tu mets l'image "normale", et en bas l'image au survol (ou le contraire, comme tu veux  :sol: )
2. tu crées ton menu.
Dans ton html, tu ne mets aucune indication de style ! L'image n'est pas indispensable (on pourrait avoir un menu en liste tout bête), doc on la reporte dans le CSS.

Code :
  1. <ul id="menu">
  2. <li><a href="index.html">index</a></li>
  3. ...
  4. </ul>


3. Tu crées ton CSS :

Code :
  1. /* On fait une liste sans points
  2. Au lieu de mettre l'image dans le HTML, on la met dans le CSS, vu que c'est de la présentation.
  3. Du coup, il faudra fixer la taille des éléments de la  liste en fonction de la taille de l'image.
  4. Il faut aussi penser à passer le display en inline pour un menu horizontal, block pour un menu vertical
  5. */
  6. #menu a {display:block;background-image:url("bouton1.jpg" );background-position:0;}
  7. #menu a:hover {background-position: 0 40px;}

Et c'est tout !
 
Evidemment, là c'est du minimaliste... Tu peux aller faire un tour sur le net, il y a plein de sites qui t'aideront à faire de beaux menus en CSS.
Entre autres :  
- CSS Zen Garden, qui propose des démos de ce qu'on peut faire rien qu'avec du CSS.
- http://pompage.net qui propose, entre autres, une série d'articles d'initiation au CSS.
- Alsacreation qui a pas mal de tutoriels.
- cssplayUn site en anglais, qui propose - entre autres- des menus évolués en pur CSS.
-  

Reply

Marsh Posté le 20-01-2009 à 16:12:57    

Merci beaucoup, je vais voir tout ça :D

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed