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+">&nbsp;"+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>
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; 
}
Merci beaucoup de votre aide et de vos réponses.