Bonjour.
Premier point :
Vu que tu utilises une feuille de style, tu devrais y mettre toutes les informations de style 
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 
)
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 :
- <ul id="menu">
- <li><a href="index.html">index</a></li>
- ...
- </ul>
|
3. Tu crées ton CSS :
Code :
- /* On fait une liste sans points
- Au lieu de mettre l'image dans le HTML, on la met dans le CSS, vu que c'est de la présentation.
- Du coup, il faudra fixer la taille des éléments de la liste en fonction de la taille de l'image.
- Il faut aussi penser à passer le display en inline pour un menu horizontal, block pour un menu vertical
- */
- #menu a {display:block;background-image:url("bouton1.jpg" );background-position:0;}
- #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.
-
...
