Bonjour a tous,
Je développe une site de type galerie, et j'ai un pb sous firefox ( uniquement ) lorsque je souhaite récupérer la taille de l'image en vue de la centrer en position absolute.
But : des vignettes sont affichées sur la page, lors d'un clic sur une vignette,
je charge l'image originale en javascript et l'affiche au centre de l'écran en surimpression ( avec reste de la page grisée ), un click sur l'image et elle disparait, on revient sur le tableau de vignettes...
Mon problème est que lors du 1 er chargement de l'image, les valeurs width et height sont fausses et retournent un truc du genre width = 24, height = 24 quelle que soit la taille réelle de l'image ...
Du coup l'image n'est pas centrée, mais pas du tout !!
Si je fais disparaitre l'image et que je reclick sur la même vignette, la taille de l'image est récupérée correctement cette fois ci, et mon image est bien centrée...
Mais il faut que l'image originale se soit déjà affichée au moins une fois ds le navigateur...
voici le code de la fonction ( un div(id=comObject) vide est deja insere dans la page html pour permettre cette fonction )
function divUpImage(url){
document.getElementById('voile').zIndex='2'; // grise la totalite de la page
document.getElementById('voile').className='visible';
document.getElementById('voile').style.position = "absolute";
var inner = "<img class='img_full' id='img_f' src='"+url+"' title='cliquez pour fermer' style='cursor:pointer;' "
+ "onclick='winClose();' >";
document.getElementById('comObject').innerHTML =inner;
document.getElementById('comObject').style.zIndex=3;
document.getElementById('comObject').style.position = "absolute";
var x_width = document.getElementById('img_f').width / 2;
var x_height = document.getElementById('img_f').height / 2;
alert( x_width+" - "+ x_height );
var x_left = screen.width/2;
var x_top = screen.height/2;
x_left = x_left - x_width;
x_top = x_top - x_height;
document.getElementById('comObject').style.left= x_left;
document.getElementById('comObject').style.top= x_top;
document.getElementById('comObject').style.visibility = "visible";
}
hormis le "voile" qui ne s'affiche pas sous IE, tout fonctionne correctement sur les autres navigateurs testes ( Chrome, IE ).
Mais sur FF, le premier affichage ne veut rien savoir et retourne des dimensions 24x24 ...
pour le voir : http://long.board.looping.free.fr/galerie.php?type=percings
Merci d'avance
Mad pour les intimes ...