Popup sur zone réactive

Ceci est ma première participation à un forum.
J'ai une carte de terrains pour entrepreneur en construction.
Je désire montrer les informations comme la superficie, no. de lot etc dans un popup lorsque la souris passe sur un terrain.

Cela fonctionne sur l'image, mais ne tient pas compte des zones réactives (area shape poly), le message s'applique à l'image entière au lieu de la zone définie.

J'ai défini une première zone sur le terrain #55 que j'ai entouré en rouge sur l'image pour fin de compréhension.
Voir la page sur site temporaire suivant : http://sites.rapidus.net/ccournoy/data/projet.htm


Merci à l'avance.

Code CSS

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 120px; /*position where enlarged image should offset horizontally */
}

Code HTML

<a class="thumbnail"><img alt="" src="images/carte_terrains.gif" usemap="#terrain" />
<map name="terrain" id="terrain">
<area  shape="poly" coords="199,89,226,103,249,70,215,64" href="#" alt="terrain_55" />
<span><img src="images/terrain-55.gif" /><br />Superficie 25000 pi2</span></map></a>

Modifié par picou222 (06 Feb 2007 - 17:12)