18041 sujets

Questions générales et questions de débutants

Rollover distant problème

Bonjour, j'ai un conteneur avec à l'interieur une image de fond représentant une carte et sur la droite j'ai ajouté une boîte avec un float:right pour avoir une liste de ville, avec un autre div qui permet lorsque l'on survole avec la souris une ville de la montrer sur la carte.
Le problème c'est que l'over je ne suis arrivé à le faire que sur le conteneur et donc il suffit de passer la souris sur l'espace pris par le conteneur pour affiche le symbole : Exemple
Et le script

<style type="text/css">
.conteneur {
	background:url(./modules/france/Europe/France/rhonealpes/74hautesavoie.gif) no-repeat 0 0;
	height: 400px; width: 100%;
	padding-top: 0px;
}
.bloc {
	height: 50px;
	width: 30%;
	float:right;
	display: inline;color:#000;background:#cff2d4;
}
div.conteneur:hover div.bloc1{
	background-color: red;
	height: 5px; width: 5px;
	float:left;
	margin-left: 134px; margin-top: 284px; 
}
</style>
<div class="conteneur">
   <div class="bloc">Annecy</div><div class="bloc1">
</div>
<br clear="all" /> 
</div>

Je crois comprendre que le problème vient de l'appel dans le conteneur mais je n'arrive pas à trouver une solution même en ayant éplucher les tutos.
Si vous aviez une idée, merci !
Modifié par oim (06 Apr 2007 - 17:06)
Non, en fait c'est pas ce que je chercher mais merci quand même ! En fait j'ai besoin que le left et le top partent du haut et gauche du conteneur (0 0) parce que j'ai plusieurs carte de taille diférent.
Salut,

Juste pour une idée:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css"> 
#conteneur {
	width: 500px;
	height:500px;
	background-color: lime;
	margin: auto;
	position:relative;
	border: 1px solid black;
	overflow: hidden;
}

ul{
width: 100px;
List-style-type: none;
overflow: hidden;
float: right;
}

li {

}



li a {

	text-decoration: none;
	display: block;
	color: #333333;
	background: yellow;

}

 li a:hover {
	color: #fff;
	background: red;	
}

li a span{

	display: none;
	
}

li a:hover span{
	position: absolute;
	display: block;
	width: 150px;
	height: 150px;
	font-size: 0.9em;
	text-align: center;
	background: #fff;
	color: black;

}

li a:hover span p{
	text-align: left;
	font-size: 0.7em;
	margin: 5px;
	
}

li a:hover span em{
	display: block;
	width: 5px;
	height: 5px;
	background: red;
	position: absolute;
	top: 0;
	left: -10px;
}

#lien1{
	top: 20px;
	left: 20px;
}	

#lien2{
	top: 140px;
	left: 40px;
}

#lien3{
	top: 50px;
	left: 120px;
}

#lien4{
	top: 250px;
	left: 20px;
}
  </style>
 
</head>

<div id="conteneur">
<ul>

	<li><a href="#">
	<span id="lien1">Lien 1<br />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a quam sed quam posuere porta. Phasellus consequat lectus vitae purus. Praesent vel urna. Praesent nec dolor. Nulla facilisi. Vivamus vitae odio.</p>
<em></em></span>
	lien1</a>
	</li>
	
	<li><a href="#">
	<span id="lien2">Lien 2<br />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a quam sed quam posuere porta. Phasellus consequat lectus vitae purus. Praesent vel urna. Praesent nec dolor. Nulla facilisi. Vivamus vitae odio.</p>
<em></em></span>
	lien2</a>
	</li>	 
	
	<li><a href="#">
	<span id="lien3">Lien 3<br />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a quam sed quam posuere porta. Phasellus consequat lectus vitae purus. Praesent vel urna. Praesent nec dolor. Nulla facilisi. Vivamus vitae odio.</p>
<em></em></span>
	lien3</a>
	</li>
	
	<li><a href="#">
	<span id="lien4">Lien 4<br />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a quam sed quam posuere porta. Phasellus consequat lectus vitae purus. Praesent vel urna. Praesent nec dolor. Nulla facilisi. Vivamus vitae odio.</p>
<em></em></span>
	lien4</a>
	</li> 
	
</ul>
</div>
</body>
</html>
Sujet clos
Aller à