Discussion :

[oim]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<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 !

[Candygirl]

Tu peux faire, par exemple, quelque chose du genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="conteneur">
  <ul>
    <li><a href="#" title="situe Annecy sur la carte de la région">Annecy<span style="top:284px;left:134px;"></span></a></li>
    <li><a href="#" title="situe Evian sur la carte de la région">Evian<span style="top:84px;left:234px;"></span></a></li>
  </ul>
</div>

avec le css suivant:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#conteneur {
 position:relative;
  background:url(./modules/france/Europe/France/rhonealpes/74hautesavoie.gif) no-repeat;
  min-height:400px;
  padding-left:500px;
}
 
* html #conteneur {height:400px;} /* fixe min-height pour IE6 */
 
#conteneur a span {
  display:none;
}
 
#conteneur a:hover {
  border:0; /* fixe bug IE6 */
}
 
#conteneur a:hover span {
  position:absolute;
  display:block;
  width:5px;height:5px;
  background-color:#F00;
  font-size:0; /* fixe bug IE6 */
}

[oim]

Mille merci, ca fonctionne parfaitement, je met en résolu