Positionnement d'un popup

Version imprimable

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:

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:

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:

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.

18/01/2008, 09h24
SpaceFrog

positionne dynamiquement ton popup en y ajoutant le srcollTop de la page ..

Si je comprends bien, il faut que j'enlève les propriétés Top et Left de mon css et que je modifie ceci dans mon javascript :
Code:

1 2 3 4 5 6 7 8 if (document.getElementById) { document.getElementById("infobulle").innerHTML = content; bulle.top = scrollTop; bulle.left = scrollLeft; bulle.visibility = "visible"; estvisible = true; }
Ca ne fonctionne pas. pour le moment.

Merci beaucoup de votre aide.

18/01/2008, 09h57
SpaceFrog
Code:

1 2 bulle.style.top = document.body.scrollTop+"px"; bulle.style.left = document.body.scrollLeft+"px"
Là il sera en haut à gauche ... àprès à toit d'jouter de que tu veux ...

merci. ca fonctionne à peu près mais comme cela se trouve sur l'évenement onclick de la mini-image, lorsque je clique pour afficher la popup, la page remonte vers le haut. Comment faire pour rester la ou se trouve la mini-image ?

J'ai modifier ceci mais cela ne marche pas comme il faut lorsqu'une mini-image est en haut de la page (cela redescend un peu et coupe le popup)
Code:

1 2 3 4 <a name=p2 href="#p2" class="rubriqueOrange" onClick="infobulle('<img src=files/images/p2.jpg /><br><a href=#p2 onclick=fermerInfobulle()>Fermer la fenêtre de zoom</a>','Zoom Image','orange',100);"> <img src=files/images/p2.jpg width=100px /></a>
Merci beaucoup

18/01/2008, 10h27
SpaceFrog

positionne le popup en em ...
et appende dans le conteneur de l'image ...
18/01/2008, 10h36
nicolas.pissard
j'ai trouvé une solution :

j'utilise la fonction onclick de l'image plutot que le lien hypertext :

Code:

<img class="imagezoomed" onClick="infobulle('<img class=imagezoomed onClick=fermerInfobulle() src=files/images/p1.jpg /><br>Cliquez sur l\'image pour fermer la fenêtre de zoom','Zoom Image','orange',100);" src=files/images/p1.jpg width=100px />
Code:

1 2 3 4 5 6 code css ajouter : .imagezoomed { cursor: pointer; }
Dites moi si cela est correct. Merci beaucoup