Discussion :

[marcandre]

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 .

[SpaceFrog]

document.write


sinon il faut ettendre le complete de l'image, ton image n'etant pas chargé, et ton calcule s'appuyant sur le height et width de l'image... le calcul ne peut s'effectuer si l'image n'est pas entièrement chargée ...

[marcandre]

Merci ,

à la place du code

Code :

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

document.write("<div id='bulle_zoom' style='background-color:#FFFFFF; position:absolute; left:0px; top:0px; visibility:hidden' ></div>");

j'ai mis la balide DIV du côté HTML

Code :

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

<div id='bulle_zoom' style='background-color:#FFFFFF; position:absolute; display:block; visibility:hidden' ></div>

mais cela ne change rien et ça pareil . Y aurai t'il un moyen de savoir si l'image est complètement chargée alors de lui attribuer une position de façon à la centrer sur l'écran ?

[SpaceFrog]

les balises img possèdent un evenement onload

[Bovino]

les balises img possèdent un evenement onload

Oui, mais son utilisation est piégeuse : si l'image est déjà en cache, le onload ne sera pas déclenché.
Préférer plutôt les propriétés complete et error