[CSS] rollover en css SUR MAP

ok... tout dabords, je tiens à mentioner que j'ai essayé plusieurs trucs mais que soit sa ne marchait, sois je n'y comprenais rien. alors, svp, envoyé moi pas le lien de carrés qui s'affichent sur les faces des beatles, je l'ai vu souvent cette page, mais nada.

DONC!!

voici la page sur laquelle je tente de créer des rollover sur les menus
http://www.freewebs.com/amelierobert/tests.htm

l'image originale ; http://www.freewebs.com/amelierobert/800x600.jpg
l'image pour les ''over'' ; http://www.freewebs.com/amelierobert/800x600%5Fover.jpg

J'ai tout découpé avec photoshop, commencons par 2 images

A - disons que celle ci
http://www.freewebs.com/amelierobert/images/AmelieRobert.com­%2DINTRO.jpg
deviens
http://www.freewebs.com/amelierobert/over/AmelieRobert.com%2­DINTRO.jpg

B - et qu'une autre image
http://www.freewebs.com/amelierobert/images/sondages.jpg
deviens
http://www.freewebs.com/amelierobert/over/sondages.jpg

alors...
l'image A est de 382x61 et est située à X: 0 Y: 0
l'image B est de 114x31 et est située à X: 0 Y: 76

comment je procède pour créer un rollover?

(alors que le code fourni par photoshop est dans ce style)

<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5" rowspan="3">
			<a href="index.html">
				<img src="images/AmelieRobert.com-INTRO.jpg" width="382" height="61" border="0" alt=""></a></td>

		<td colspan="4" rowspan="4">
			<img src="images/800x600photoshop_02.jpg" width="326" height="76" alt=""></td>
		<td>
			<a href="fr.html">
				<img src="images/Accueil.jpg" width="92" height="32" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="32" alt=""></td>
	</tr>
	<tr>

		<td>
			<a href="http://www.amelierobert.com/fra.html">
				<img src="images/fra.jpg" width="92" height="16" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>

O_O

merci à 'avance

JAI BESOIN DE VOTRE AIDE!