CSS / Menu avec des images

Bonjour,

Voilà, j'ai trouvé un code sympathique utilisant JQuery en fouillant sur le net. Ce code donne un résultat vraiment bien, mais j'aimerai l'agrémenter en changeant deux ou trois choses. Voilà ce que donne le code de base.

http://www.noshade.net/imgs/tutoriaux/115_css/resultat/

J'aimerai commencer par faire en sorte que les différents boutons du menu soient des images plutôt qu'une couleur simple. Une image qui change lorsqu'on passe la souris dessus.

J'ai sans doute beaucoup d'autres questions, mais je m'estimerai heureux d'avoir déjà une réponse à ça.

Ci-joint, le code CSS utilisé pour obtenir le résultat linké plus haut.

body {
background-color: #000000;
margin: 0;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #ffffff; }

#titre {
background-color: #f8a10a;
color: #000000;
padding: 15px; }

h1 {
font-size: 20px;
text-transform: uppercase;
line-height: 15px;
margin: 0; }

h2 {
font-size: 10px;
text-transform: uppercase;
line-height: 10px;
margin: 0; }

.centrage {
display: block;
width: 800px;
margin: 0px auto 0px auto; }

#page {
padding-top: 20px; }

#menu {
margin-bottom: 20px; }

#menu .onglet {
display: block;
float: left;
padding: 10px;
background-color: #f8a10a;
margin-right: 1px;
text-decoration: none;
color: #000000; }

#contenu {
background-color: #1b1b1b; }

.bloctexte {
padding: 10px; }


Merci par avance.