Bonjour,
Je suis en train de mettre en place un popup sur une mini-image qui affiche celle-ci en taille réelle. Le problème est que si ma mini-image se trouve dans le haut de la page aucun soucis le popup se place au milieu de la page et s'affiche. Mais dès que l'on place la mini-image en bas de page, le popup s'affiche en haut de la page et fait remonter celle-ci. Comment faire pour positionner le popup au centre de la page quelque soit l'endroit ou se trouve la mini-image.
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
26
27
28
29
30
31
32
33
34
35
36
37 Voici le code Javascript : estvisible=false; if (document.getElementById) { bulle = document.getElementById("infobulle").style; } function infobulle(contenu,titre,type,taille) { if(type == "orange") { var classeTitre = "titreOrange"; var classeContenu = "contenuOrange"; var classeBordure = "bordureOrange"; } var content ="<TABLE BORDER=0 class="+classeBordure+" CELLPADDING=0 CELLSPACING=0 width="+taille+"><tr><td class="+classeTitre+"> "+titre+"</td></tr><TR><TD><TABLE border=0 CELLPADDING=3 CELLSPACING=0 width=100% height=100%><TR><TD class="+classeContenu+">"+contenu+"</TD></TR></TABLE></TD></TR></TABLE>"; if (document.getElementById) { document.getElementById("infobulle").innerHTML = content; bulle.visibility = "visible"; estvisible = true; } } function fermerInfobulle() { if (document.getElementById) { bulle.visibility = "hidden"; estvisible = false; } }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 Le code d'appel de la popup dans la page : <a href="#" class="rubriqueOrange" onClick="infobulle('<img src=files/images/p2.jpg /><br><a href=# onclick=fermerInfobulle()>Fermer la fenêtre de zoom</a>','Zoom Image','orange',100);"><img src=files/images/p2.jpg width=100px /></a>Merci beaucoup de votre aide et de vos réponses.
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 Le code css : .initInfobulle { position: absolute; visibility: hidden; top: 200px; left: 400px; } .titreOrange { font-family: Arial; font-size: 12px; font-weight:bold; color: #D55500; text-decoration:none; border-spacing:0px; border-bottom:#FF6600; border-width:1px; border-style:solid; border-left-style:none; border-top-style:none; border-right-style:none; background:#FFC791; } .contenuOrange { font-family: Arial; font-size: 11px; font-weight:none; color: #000000; text-decoration:none; background:#FFF3E8; } .bordureOrange { border-spacing:0px; border-left:#FF6600; border-right:#FF6600; border-top:#FF6600; border-bottom:#FF6600; border-width:1px; border-style:solid; }
Partager