Image qui change au survol : comment faire pour qu'elle reste fixe ?

bonjour,

je rencontre le problème suivant :

ma page html contient une carte de france découpée en régions sur le modèle :

  <img usemap="#carte" src="carte_de_france.png" /> 
<map id="carte" name="carte">
<area onmouseover="MM_showHideLayers('regionA','','show')" onmouseout="MM_showHideLayers('regionA,'','hide')" shape="poly" coords=".....">

quand on passe le curseur de la souris sur la région considérée, une autre image s'affiche (représentant la région dans une autre couleur) :

<div id="regionA" style="position: absolute; width: xx; height: xx; z-index: 1; left: 0px; top: 0px; visibility: hidden;"><img src="regionA.png" height="..." width="..." />

le code fonctionne mais (car il y a un mais ) quand on passe le curseur sur la région considérée, l'image de substitution s'affiche juste une micro-seconde puis disparait pour laisser place à l'image d'origine

quelqu'un sait-il comment faire pour que l'image de substitution reste affichée tant que l'utilisateur n'a pas bougé la souris ?

Merci par avance

Bonsoir,

Est-ce que vous cherchez ça?

bonjour

@lddsoft :
en fait, je donne à la div les mêmes dimensions que l'image associée
. cela donne concrètement :

<div id="regionA" style="position: absolute; width:100px ; height: 100px; z-index: 1; left: 0px; top: 0px; visibility: hidden;"><img src="regionA.png" height="100px" width="100px" />

@rodolpheb
c'est exactement ça !
merci pour le lien, je vais l'examiner en détail