Pb avec mes zones réactives (image map) en CSS

Bonsoir,,

Je mets en pratique le tuto sur les zone réactive (image map) en CSS et j'ai problème.
Pour la première zone, aucun souci, au survol de la souris une aute image s'affiche.
Le problème apparaît lorsque je crée une seconde zone.
En effet, au survol de la première zone, la seconde zone se décale vers la droite...

Voici mon code CSS

<!--
#image {    /* bloc image en arrière-plan */
float:left;
width : 830px;
height: 500px;
background: url(images/trpn_netcentral_principe.jpg) top left no-repeat;
}
#zone1 {    /* zone cliquable */
float: left;
width : 50px;
height: 70px;
margin-left: 200px;
margin-top: 300px;
border:1px solid black;
}

#zone1:hover {    /* zone cliquable */
float: left;
width : 288px;
height: 319px;
margin-left: 50px;
margin-top: 100px;
border:none;
background:url(images/outils.gif);
}

#zone2 {    /* zone cliquable */
float: left;
width : 50px;
height: 70px;
margin-left: 250px;
margin-top: 300px;
border:1px solid black;
}

#image a span { /* contenu masqué mais accessible sans CSS*/
position: absolute;
left: -500em;
top: -500em;
text-indent: -500em;
}

Code HTML

<div id="image">
	<a id="zone1" href="images/outils.gif" title="zone1"</a>
	<a id="zone2" href="images/outils.gif"</a>
	<a id="zone3" href="images/collecteur.gif"</a>
</div>

Si quelqu'un pouvait m'aider...

Merci

Personne pour m'aider ?...