Bonjour,  
 
Sur la page d'accueil de mon site, j'ai créé une image sur laquelle on voit des bols. Je souhaiterais que cette image fonctionne comme un menu.
Je voudrais donc que chacun des bols présents sur mon image soit un "bouton".  
C'est à dire que chaque bol possède un lien mais aussi qu'au passage de ma souris, le bol survolé change (couleur, forme... aucune importance).
 
J'ai donc mappé mon image pour y mettre les liens. Jusque là, aucun souci.
Voici mon code :  
 
<div align="center"><img border="0" src="IMAGE 1" usemap="#MAP N°1" />
<map name="MAP N°1">
<area shape="circle" coords="132,556,105" href="LIEN N°1" />
<area shape="circle" coords="341,545,102" href="LIEN N°2" />
<area shape="circle" coords="553,543,103" href="LIEN N°3" />
<area shape="circle" coords="515,358,81" href="LIEN N°4" />
</map></div>
 
Le problème est que je ne sais pas comment faire pour que l'image change, uniquement au passage de la souris sur chacune de ces zones, et que chaque survol de zone me donne une image différente tout en conservant leurs liens respectifs, et que tout ceci fonctionne sur tous les navigateurs internet.
 
La seule solution que j'ai trouvé ne fonctionne que sur une image non mappée.  
Voici le code que j'avais trouvé :
 
 <a href="LIEN"><img class="CtreTexte" onmouseover="IMAGE N°2'" onmouseout="IMAGE N°1'" src="IMAGE N°1" /></a>
 
( Je comprend que "onmouseover" et "onmouseout" servent pour le survol de la souris, mais je ne comprend pas ce qu'est "img class"CtreTexte"" )
 
S'il vous plait, quelqu'un peut-il m'aider, je suis au bord du suicide.