Discussion :

[nicolas.pissard]

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.

[SpaceFrog]

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

[nicolas.pissard]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[nicolas.pissard]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

positionne le popup en em ...
et appende dans le conteneur de l'image ...

[nicolas.pissard]

j'ai trouvé une solution :

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
code css ajouter :

.imagezoomed
{
cursor: pointer;
}

Dites moi si cela est correct. Merci beaucoup