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...

[Bisûnûrs]

Heu, le onmouseover et onmouseout, tu dois les mettre sur le même area.

[laurentSc]

Oui, maintenant, elle se referme bien, mais le problème c'est que je suis obligé de superposer l'image qui apparaît et celle qu'on survole pour que l'image ne disparaisse pas quand on la survole, et quand on la survole, ça tremblote tout le temps ; code actuel :

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
<div id="nouveautes"
 style="z-index: 2; left: 500px; 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'"
 onmouseout="nouveautes.style.visibility='hidden'" shape="RECT"
 coords="1,1,389,355" href="#">
</map>

[laurentSc]

J'ai récupéré un code qui fait ce que je voudrais :

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
<div id="LayerDelive"
 style="z-index: 2; left: 420px; width: 100px; position: relative; top: 348px; height: 64px; background-color: rgb(224, 255, 255); visibility: hidden;">
<p>Coucou<br>
<a href="http://www.google.com" target="_blank">google</a></p>
</div>
<div id="LayerFond"
 style="z-index: 1; left: 158px; visibility: visible; width: 460px; position: relative; top: 80px; height: 78px; background-color: rgb(255, 255, 255);"><img
 src="http://vercorshandisport.org/test/bulles_indus_EN.gif"
 usemap="#Map" border="0"> <map name="Map">
<area onmouseover="LayerDelive.style.visibility='visible'"
 shape="CIRCLE" coords="380,240,50">
<area onmouseover="LayerDelive.style.visibility='hidden'"
 shape="RECT" coords="3,-19,461,427" href="#">
</map>
</div>

mais j'ai beau mettre "position : relative", le positionnement est absolu. Or je voudrais intégrer ce code dans une page ; donc, comment faire ?

[devyan]

Bonjour,

J'ai récupéré un code qui fait ce que je voudrais :

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
<div id="LayerDelive"
 style="z-index: 2; left: 420px; width: 100px; position: relative; top: 348px; height: 64px; background-color: rgb(224, 255, 255); visibility: hidden;">
<p>Coucou<br>
<a href="http://www.google.com" target="_blank">google</a></p>
</div>
<div id="LayerFond"
 style="z-index: 1; left: 158px; visibility: visible; width: 460px; position: relative; top: 80px; height: 78px; background-color: rgb(255, 255, 255);"><img
 src="http://vercorshandisport.org/test/bulles_indus_EN.gif"
 usemap="#Map" border="0"> <map name="Map">
<area onmouseover="LayerDelive.style.visibility='visible'"
 shape="CIRCLE" coords="380,240,50">
<area onmouseover="LayerDelive.style.visibility='hidden'"
 shape="RECT" coords="3,-19,461,427" href="#">
</map>
</div>

mais j'ai beau mettre "position : relative", le positionnement est absolu. Or je voudrais intégrer ce code dans une page ; donc, comment faire ?

Essaye en enlevant le positionnement css (left:420px et top:348px)

[laurentSc]

Je ne me souviens plus de ce que j'ai fait (ça date de jeudi dernier), mais c'est résolu, et j'avais oublié de le signifier.