photo agrandie dans div

Version imprimable

Bonjour,
j'essaye de faire afficher une grande photo en cliquant sur une vignette. Les 2 photos ne sont pas les mêmes. L'affichage doit se faire dans une div au préalable invisible (css display:none). Lorsque je clique sur la vignette, je change le css de la div en display:block.
Mon souci est que je n'arrive pas à récupérer la largeur et hauteur de ma div, pour la centrer ( enredefinissant son left et son top).
Petite précision, je passe par un champ <img> dans la div pour afficher la photo, et je modifie son src.

le code dans ma page html:

Code:

<div id="photo"><img src="" name="maphoto2" id="maphoto2" /></div>

et le css de la div:
Code:

1 2 3 4 5 6 7 #photo{ border:1px solid black; z-index:1000; display:none; position:absolute; }
Voila le code actuel de la fonction javascript que j'apelle en cliquant sur la vignette:
Code:

1 2 3 4 5 6 7 8 9 10 11 function affiche_image(image){ var cadre=document.getElementById('photo'); cadre.style.display='block'; document.images["maphoto2"].src=image; var l=cadre.style.width; var h=cadre.style.height; var left=(screen.width-l)/2; var top=(screen.height-h)/2; cadre.style.left=left + "px"; cadre.style.top=top + "px"; }
et là ça coince, l et h n'ont aucune valeur donc ma div se met en bas à droite de ma page.
est-ce que quelqu'un comprendrais pkoi par hasard??
merci d'avance :D

23/04/2008, 14h43
Dev@lone

Je sais pas si sa peux te servir, mais HighSlide à déjà tout ceci de pret... Si sa t'interesse!

HighSlide
23/04/2008, 15h05
swingstar

ok je note ça. mais en fait je profite de mes projets pour apprendre alors si je peux éviter le copier coller...

Essais ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function affiche_image(image){
		var cadre=document.getElementById('photo');
		cadre.style.display='block';
		document.images["maphoto2"].src=image;
		var l=cadre.width;
		var h=cadre.height;
		var left=(screen.width-l)/2;
		var top=(screen.height-h)/2;
		cadre.style.left=left + "px";
		cadre.style.top=top + "px";
	}

Il me semble qu'il ne faut pas .style

23/04/2008, 16h17
swingstar

ah j'ai trouvé!!

function affiche_image(image){

cadre=document.getElementById("photo");
cadre.style.display="block";
document.images["maphoto2"].src=image;
var l=document.images["maphoto2"].width;
var h=document.images["maphoto2"].height;
var left=(screen.width-l)/2;
var top=(screen.height-h)/2;
cadre.style.left=left + "px";
cadre.style.top=top + "px";

}
par contre en enlevant juste .style ça ne marchaient pas non plus
merçi qd même :D
23/04/2008, 16h21
swingstar

arf fausse joie, ça ne fonctionne pas sous IE6...:cry:

la photo ne se charge même pas dans la div

c'est à dire que IE n'aime pas ça:

document.images["maphoto2"].src=image;

est-ce quelqu'un saurais pourquoi par hasard?

image est une string, je ne comrends pas pourquoi ça ne marche pas...

si j'essaye directement en remplaçant la variable image par l'url d'une image, du genre:

document.images["maphoto2"].src="photo/maphoto.jpg";

là ça fonctionne bien...