Discussion :

[laurentSc]

Bonjour,

je cherche à faire une "popup" en html qui fait apparaître une fenêtre quand la souris survole la zone et la fait disparaître quand la souris s'éloigne : la première étape marche bien, mais je n'arrive pas à faire disparaître la souris, quand elle quitte la zone. Peut-on me dire ce qui coince ?

Voici mon code :

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
<div id="nouveautes"
 style="z-index: 2; left: xxx px; width: yyy px;top: zzzpx; height: zzz px;  position: absolute; background-color: rgb(214, 214, 214); visibility: hidden;">
<!-- contenu html de la fenêtre -->
 
</div>
<div id="LayerFond"
 style="z-index: 1; left: lll px; visibility: visible; width: www px; position: absolute; top: ttt px; height: hhh px; background-color: rgb(255, 255, 255);"><img
 id="id_image" alt=""
 src="---"
 usemap="#xxxx" name="yyyy"
 border="0"> <map id="xxxxx"
 name="yyyyy">
<area onmouseover="nouveautes.style.visibility='visible'"
 shape="RECT" coords="zzzz" href="#">
<area onmouseover="nouveautes.style.visibility='hidden'" shape="RECT"
 coords="zzzzz" href="#">
</map>
</div>

[insane1]

Vous utilisez deux fois onmouseover.
Pour sortir pourquoi ne pas utiliser onmouseout ?

Vous voulez faire une infobulle en fait ? Si c'est cela il existe différentes façon, en js ou juste en css, à vous de choisir.

[laurentSc]

L'absence de "onmouseout" est dûe à un copier-coller... mais si je le mets, ça ne change rien.
Sinon, ce n'est pas une infobulle que je veux faire, mais ouvrir une fenêtre contenant des liens.

[Baldy]

As tu un intérêt précis à ouvrir une pop up plutot qu'afficher un DIV?

Parce que les navigateurs bloquent de plus en plus de pop up, ce qui peut être génant dans ton cas.

[Bisûnûrs]

Heu, on peut avoir un vrai code clef en main ? Parce que là, à part essayer de mettre des valeurs au pif pour tenter vainement de l'utiliser, on peut pas en faire grand chose.
En plus on ne sait même pas à quoi correspond ce "nouveautes".

[laurentSc]

Voici le code que j'utilise pour faire un test (évidemment, ce n'est pas définitif, mais je réutilise l'image utilisée dans un code qui fait à peu près ça (et j'ai mis l'image sur internet, car en réalité, c'est de l'intranet)) :

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
<div id="nouveautes"
 style="z-index: 2; left: 250px; width: 335px; position: absolute; top: 150px; height: 130px; background-color: rgb(214, 214, 214); visibility: hidden;">
<p>Coucou<br>
<a href="http://www.google.com">google</a></p>
</div>
<div id="LayerFond"
 style="z-index: 1; left: 147px; visibility: visible; width: 454px; position: absolute; top: 100px; height: 78px; background-color: rgb(255, 255, 255);"><img
 id="bubbles_Electromech2" alt=""
 src="http://vercorshandisport.org/test/orga2.gif"
 usemap="#m_bubbles_Electromech2" name="bubbles_Electromech2"
 border="0"> <map id="m_bubbles_Electromech2"
 name="m_bubbles_Electromech2">
<area onmouseover="nouveautes.style.visibility='visible'"
 shape="RECT" coords="1,1,389,355" href="#">
<area onmouseout="nouveautes.style.visibility='hidden'"
 shape="RECT" coords="100,100,500,500" href="#">
</map>
<!-- 1,1,389,355 -->
</div>

Et en fait, l'image disparaît si on déplace la souris vers le bas, mais pas vers les côtés ni le haut...