Discussion :

[swingstar]

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 :

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

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

et le css de la div:

Code :

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

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 :

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

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

[Dev@lone]

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

HighSlide

[swingstar]

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

[Dev@lone]

Essais ceci:

Code :

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

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

[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

[swingstar]

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

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...