[Css] Cherche a faire effet

Tout d'abord, Bonjour a tous Nan..je rigole

Donc voila j'ai un probleme pour mon site j'ai fait un menu actif horizontal
Avec , dés que je passe la souris sur un lien une image qui s'affiche : voir image

Image : http://pics.imagup.com/04/1253325443_123.jpg

Je voudrais faire un effet : que chaque onglets et une image differente ( Acceuil : violet ; Guitare : Bleu ...)
J'ai les images deja.

Mon code css :

body,html {background:#000 url(images/fond.jpg) repeat-x;margin:0;padding:0;background-attachment: fixed;margin:0;padding:0}
.conteneur {margin: 0 auto 0;width: 800px;position:relative;background-color:#000}
#header {height:179px; background:url(images/bann2.bmp);margin:0 auto 0 auto;width:800px}
#header2 {width:800px;margin:0;padding: 0;height:30px;background: url(images/menu.jpg) }

#left {width: 350px;color:#fff;font:12px/13px arial;padding:0 0 0 25px}
#right {width: 390px;color:#fff;font:12px/13px arial;right:0;padding:0 10px 0 0 }
#separation {width:20px ;margin:0 0 0 0;padding: 10px 0 10px 0}
td {width:390px ;margin:0;padding:0}
td.centre {width:20px ;margin:0;background: url(images/separation.jpg) repeat-y;}
table.haut {width:800px ;margin:20px 0 0 0;padding:0}

p {color:#00365a;font:12px/13px arial;margin:0;padding:0}
a {color: #00365a;text-decoration: none;margin: 0;outline:none}
a:hover {color: #fff;text-decoration: none;margin: 0}

#menu, #menu ul {padding : 0;margin : 0 0 0 51px; list-style : none;text-align : center;font-family: verdana ; font-size: 7pt}
#menu a {display : block;height:30px;color: #FFF;text-decoration : none;line-height: 30px;width: 100px;font-weight: bold;background: url(images/bouton.jpg); outline:none}
#menu li {float : left;}
#menu a:hover {background: url(images/menu_hoverviolet.jpg)}


#plandusite, #plandusite ul {padding : 0;margin :0 8px 0 0; list-style : none;text-align : center;font-family: verdana ; font-size: 7pt}
#plandusite a {display : block;height:7pt;color: #FFF;text-decoration : none;line-height: 7pt;font-weight: bold; outline:none;width:65px;border-right: solid 1px white}
#plandusite li {float : right;bottom:0;margin:41px 0 0 0}
#plandusite a:hover {color:#FF9900}



.separateur {clear: both;visibility: hidden; }
#pied {background:url(images/pied2.jpg) no-repeat;height:58px;width:800px;margin: 0 auto 0 auto;padding: 0;}
a.copyright {position:absolute;bottom:0.5%;width:155px;height:10px;left:6%}
img {border:0;margin:2px 0 0 0}

.copyright a {position:absolute;padding :0;margin :22px 0 0 0;color:#fff;font:12px arial;right:190px;text-decoration: none;outline:none}
.copyleft a {position:absolute;padding :0;margin :22px 0 0 0;color:#fff;font:13px arial;right:13px;text-decoration: none;outline:none;width: 130px;height:18px}


.haut_contenu {width:772px;background: url(images/haut_contenu.jpg);margin:0 auto 0 auto;padding:0;height:29px}
.fond_contenu {width:756px;background: url(images/fond_contenu.jpg);margin:0 auto 0 auto;padding:0 8px 0 8px;color:#fff;font:12px/13px arial;}
.bas_contenu {width:772px;background: url(images/bas_contenu.jpg) ;margin:0 auto 0 auto;padding:0;height:26px}

Merci de m'aider

Darkolo