Position de l'image non centrée par rapport à l'écran
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:
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> </td><td><a href='javascript:HideZoom();'><img src='" + chemin + "' alt='Cliquez ici pour fermer' title='Cliquez ici pour fermer' border=0 /></a></td><td> </td></tr><tr><td colspan=3></td></tr><tr><td colspan=3> </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:
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 .
