Carte de France avec des img cliquable au survol de zone

Bonjour,
Je me heurte à une difficulté imprévu...
En effet, sur une carte de Paris, je dois représenter sous forme de points les principaux monuments historique de la ville. Au passage de la souris sur ce point, une photo du monument apparait permettant d'accéder à une nouvelle page décrivant l'histoire du monument. Seule la zone "du point" doit être active, c'est-à-dire entrainer l'affichage de la vignette.

J'ai essayé ça :

<DL id=gmap>
<DD><A id="link1" title="title" href="..."></A> 
<DD><A id="link2" title="title" href="..."></A> 
<DD><A id="link3" title="title" href="..."></A> 
</DL>

Avec une css de type :

#gmap {
	display: block; 
	background: url(plan_paris.jpg); 
	margin: 0px auto 2em; 
	width: 461px; 
	position: relative; 
	height: 505px
}
#gmap A {
	font-weight: bold; 
	font-size: 0.7em; 
	color: #000; 
	font-family: arial, sans-serif; 
}

A#title {
	display: block; 
	background: url(plan_paris.jpg) no-repeat 461px 570px; 
	left: 0px; 
	width: 461px; 
	cursor: default; 
	padding-top: 570px; 
	position: absolute; 
	top: 0px; 
	height: 0px; 
	text-decoration: none;
}
A#title:visited {
	display: block; 
	background: url(plan_paris.jpg) no-repeat 461px 570px; 
	left: 0px; 
	width: 461px; 
	cursor: default; 
	padding-top: 570px; 
	position: absolute; 
	top: 0px; 
	height: 0px; 
	text-decoration: none;
}
A#title {
	height: 0px;
}
A#title:hover {
	background-position: 0px 0px; 
	overflow: visible; 
	color: #c00;
}
/* Premier lien : La tour Eiffel  */ 
A#link1 {
	display: block; 
	background: url(01_toureiffel.jpg) no-repeat 400px 400px; 
	left: 375px; 
	top: 467px; 
	overflow: hidden; 
	width: 110px; 
	padding-top: 110px; 
	position: absolute; 
	height: 0px
}
* HTML A#link1 {
	height: 0px
}
A#link1:hover {
	background-position: 0px 0px; 
	overflow: visible
}

... répété pour tous les liens

Cette solution à l'inconvénient de rendre active toute la zone de l'image invisible, je me retrouve alors avec des chevauchement. Certain point sont inactivable puisque dès que je m'en approche, l'image se trouvant à coté recouvre le tout.

Je n'ai malheureusement pas retrouver d'autre solution, quelqu'un pourrait il m'indiquer une autre solution (sans utiliser le flash), SVP ?

Salut,

Pas franchement orthodoxe, pas franchement accessible, pas franchement ...

là

Bonjour,

1. Utiliser une image Map pour la carte avec points réactifs.
2. Utiliser Javascript pour activer l'affichage d'un contenu (image) lors du survol ou du focus sur chaque point réactif (élément area).

La spécification HTML 4.01 permet d'en savoir plus sur les images Map.

je suis pas très doué en javascript mais je vais voir ça... merci pour vos réponses

si je peux me permettre une suggestion, il existe aussi l'api google maps qui permet de réaliser des trucs assez sympa en d'intégrant une carte google map a son site.

# J'ai trouvé une solution sur le site :
http://www.irt.org/articles/js026/index.htm#4

Bien que cette solution réponde pleinement à ce que je cherchais, je regrette d'être obligé de recharger l'ensemble de l'image, ce qui avec des connexion "lente" peut être embêtant.
En tout cas merci à tous pour vos réponses

mdasilva a écrit :
# J'ai trouvé une solution sur le site :
http://www.irt.org/articles/js026/index.htm#4

Ne fonctionne pas dans mon cas (avec Firefox 3).