Lien sous un DIV dans Firefox

Bonjour,

J'ai une image représentant la carte de France avec une maparea découpant chacun des départements. Lorsque je clique sur un département j'affiche des infos contenues dans un div.

Les div sont cachés par défaut au dessus de la carte.

Seulement voilà sous IE j'ai bien accès à mes liens sous mes div, mais sous firefox je ne peux cliquer nul part.

Merci d'avance pour votre aide.

++

Bonjour,

Difficile de te répondre sans plus de précisions (et d'exemple de code), mais paut-être devrais-tu remplacer visibility: hidden; par display: none; ?

En fait j'ai une image avec des zones réactives dessus.

Par dessus, j'affiche un div en position absolue. A l'intérieur de ce DIV se trouvent tous les DIV à afficher lorsque l'on clique sur un département.

Voici mes deux fonctions javascript, me permettant d'ouvrir et de fermer les DIV correspondants.

<script language="JavaScript" type="text/javascript">
var openDep = false;
function Afficher(n_dep, y, x)
{
	if (document.getElementById("dep_"+n_dep).style.display == "none")
	{
		document.getElementById("div_principal").style.display = "block";
		document.getElementById("dep_"+n_dep).style.top = y+"px";
		document.getElementById("dep_"+n_dep).style.left = x+"px";
		document.getElementById("dep_"+n_dep).style.display = "block";

		if(openDep != false)
		{
			Afficher(openDep);
		}
		openDep = n_dep;
	}
	else
	{
		document.getElementById("dep_"+n_dep).style.display = "none";
		openDep = false;
	}
}
function Masquer() 
{
	document.getElementById("div_principal").style.display = "none";
	document.getElementById("dep_"+openDep).style.display = "none";
	openDep = false;
}
</script>

Mes CSS:

<style type="text/css">
.div_departement {
	color:black;
	width: 250px;
	height:220px;
	overflow: auto;
	font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.conteneur {
	width: 510px;
	height: 480px;
	position:absolute;
	display:none;
}
</style>

Et le reste de ma page:

<div class="conteneur" id="div_principal">
	<div id="dep_50" class="div_departement" style="display:none">
		<a href="#" onClick="Masquer(); return false;"><img src="images/fermer_carte.gif" border="0" /></a>
		<br />
		Blablabla...
	</div>
	<div id="dep_51" class="div_departement" style="display:none">
		<a href="#" onClick="Masquer(); return false;"><img src="images/fermer_carte.gif" border="0" /></a>
		<br />
		Bolobolob...
	</div>
</div>
<img src="carte-france.gif" width="465" height="495" border="0" usemap="#Map" href="#" alt="" />
<map name="Map" id="Map">
	<area onclick="Afficher(50, 230, 260); return false;" shape="poly" coords="36,131,53,131,61,133" href="#" />
	<area onclick="Afficher(51, 230, 260); return false;" shape="poly" coords="128,138,124,127,128,120" href="#" />
</map>

Je n'ai laissé que 2 départements au hasard pour l'exemple.

Merci d'avance