Rollover distant

Version imprimable

Rollover distant

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:

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 !

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

Code:

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:

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 */
}

09/04/2007, 10h06
oim

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