Bonjour à tous,

J'ai réalisé une fonction javascript permettant d'afficher une image au centre de l'écran . Bien entendu un calcul est fait pour déterminer la position de l'image en fonction de sa dimension (hauteur et largeur).

Seulement voilà lorsque je fait appel à la fonction d'affichage l'image par un lien pour la toute première fois, l'image n'est pas centrée par rapport à l'écran. En cliquant une deuxième fois sur le lien appelant cette fonction , l'image est cette fois ci centrée .

Voici le code javascript que j'utilise pour positionner l'image à afficher :

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
 
                var hauteur_zoom = 0;
		var largeur_zoom = 0;
		function ShowZoom(chemin){
			texteForme = "";
			largeurBulle = 400;
			hauteurBulle = 300;
 
			texteForme = "<table ><tr><td colspan=3></td></tr><tr><td>&nbsp;</td><td><a href='javascript:HideZoom();'><img src='" + chemin + "' alt='Cliquez ici pour fermer' title='Cliquez ici pour fermer' border=0 /></a></td><td>&nbsp;</td></tr><tr><td colspan=3></td></tr><tr><td colspan=3>&nbsp;</td></tr></table>";
 
 
			document.getElementById("bulle_zoom").innerHTML=texteForme;
			document.getElementById("bulle_zoom").style.visibility='visible';
			positionnerZoom();
 
		}
 
 
		function positionnerZoom(){
			getDimension(document.getElementById("bulle_zoom").offsetHeight,document.getElementById("bulle_zoom").offsetWidth);
 
			document.getElementById("bulle_zoom").style.left=((screen.width - largeur_zoom)/2)+'px';
			document.getElementById("bulle_zoom").style.top=(document.body.scrollTop + (document.body.clientHeight - hauteur_zoom)/2)+'px';
		}
 
		function getDimension(haut,largeur){
			hauteur_zoom = haut;
			largeur_zoom = largeur;
			ratio = largeur_zoom / hauteur_zoom; 
 
			if(hauteur_zoom > screen.height * 0.80){
				hauteur_zoom = screen.height * 0.80;
				largeur_zoom = ratio * hauteur_zoom;
			}else{			
				if(largeur_zoom > screen.width * 0.80){
					largeur_zoom = screen.width * 0.80;
					hauteur_zoom = largeur_zoom/ratio;
				}
			}
 
		}

Que faut-il faire pour que l'image soit bien centré pour la toute première fois .


Voici la fonction permettant d'initialiser la balise DIV qui contiendra l'image :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
function InitZoom(){
 
	document.write("<div id='bulle_zoom' style='background-color:#FFFFFF; position:absolute; left:0px; top:0px; visibility:hidden' ></div>");
		}

Cordialement .