Styles et Map Area

Bonjour,

N'ayant pas trouvé mon bonheur avec le moteur de recherche (les posts les plus intéressants pour moi datant d'il y a 2-3 ans, il y a peut être du nouveau depuis) ni même internet (je trouve tout et son contraire, et ne sait toujours pas finalement si oui ou non on peut leur passer des styles), je vous appelle à l'aide.

Je crée une page façon Météo de la France.
J'ai crée une <div> contenant une carte de France et une map area pour découper les zones de mes départements.
J'utilise un script Jquery (maphilight : http://davidlynch.org/projects/maphilight/docs/) pour mettre en surbrillance les différentes zones au survol des zones. Et ça marche très bien.
Pour afficher sur mes départements la météo, j'ai crée une <div> par département contenant une image et un lien sur cette image. Et par .css, je la sors du flux et la positionne par dessus ma carte. Ce qui là aussi fonctionne ma foi quasiment exactement comme je le veux.

Le problème est le suivant :
Au survol du département, la zone se met en surbrillance, par contre, au survol de mon image, la zone derrière ne se met plus en surbrillance (ce qui semble normal vu que j'ai positionné mon image par dessus).
Ca fait donc 2 jours que je tente de modifier l'ordre d'empilement des objets via .css, l'utilisation de z-index me semblait assez logique, mais j'y arrive pas.
J'ai aussi tenté de modifier l'ordre des objets dans le code HTML (images avant la map area, ...) mais ça ne fonctionne pas non plus.

Ce que je tente de faire : Passer d'un empilement d'objets "Carte de france\map area\météo" à "Carte de france\météo\map area" (je passerai le lien sur la shape area au lieu de l'image).

<div id="Map">
	<img id="Carte" usemap="#CarteFrance" src="../France.PNG" width="482" height="561" border="0" />
	<map name="CarteFrance">
		<area shape="poly" id="Dpt29" title="Finistère" alt="Finistère" 
coords="293,82,299,82,..." />
		<area shape="poly" id="Dpt35" title="Ille-et-Vilaine" alt="Ille-et-Vilaine" coords="293,82,299,82,..." />
		<area shape="poly" id="Dpt56" title="Morbihan" alt="Morbihan" coords="293,82,299,82,..." />
	</map>
	<div id="Dpt29_Meteo" class="Meteo"><a href="Dpt29.html"><img src="../Soleil.png" /></a></div>
	<div id="Dpt35_Meteo" class="Meteo"><a href="Dpt35.html"><img src="../Soleil.png" /></a></div>
	<div id="Dpt56_Meteo" class="Meteo"><a href="Dpt56.html"><img src="../Soleil.png" /></a></div>
</div>

#Map {
		width:483px;
		margin:0 auto;
	}
	.Meteo {
		float:left;
		position:absolute;
	}
	.Meteo a img {
		height:32px;
	}
	#Dpt29_Meteo {
		top:230px;
		left:240px;
	}
	#Dpt35_Meteo {
		top:210px;
		left:365px;
	}
	#Dpt56_Meteo {
		top:290px;
		left:495px;
	}

<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#Carte').maphilight({
			fade: false,
			fill: true,
			fillColor: 'b7e6ea',
			fillOpacity: 0.5,
			stroke: true,
			strokeColor: 'b7e6ea',
			strokeOpacity: 1,
			strokeWidth: 1,
		});
	});
</script>

Ah oui, l'intégration des images Météo dans la carte de France n'est pas possible. Il y a une mise à jour quotidienne et les différentes météos sont récupérés automatiquement via des scripts qui ne savent pas me générer de fichier image.

Merci d'avance.

Manu
Modifié par ManuB28 (23 Aug 2012 - 09:17)

Bonjour,

si tu veux comparer avec un exemple qui fonctionne et qui me semble-t-il nous avait posé des problèmes similaires : http://www.orientation-pour-tous.fr/spip.php?page=lieux (mais l'effet au survol est-il similaire ?)

Bonjour,
J'ai réaliser une page de recherche cliquable avec maphilight,
Quant je survol un lien l' "area" correspondante se met en surbrillance,
mais comment faire l'opération inverse comme sur votre site (au survole de la carte la région correspondante change de style)?

SVP quelqu’un a une réponse?