[RESOLU] Javascript, superposition successive d'images

Bonjour à tous,

je suis débutante en CSS et j'ai un petit souci. J'ai pas mal cherché sur le net et les solutions que j'ai trouvées ne m'ont pas aidée.

J'ai 2 images l'une à côté de l'autre. Quand on clique sur l'une d'elle, j'aimerais qu'elle zoome en passant par dessus l'autre. Quand on clique de nouveau dessus, elle dé-zoom et donc ne rogne plus sur l'autre.

Cependant, je n'arrive pas à faire passer l'image de la première div par dessus l'autre.
J'ai essayé de modifier la hiérarchie des div (les imbriquer entre elles, les imbriquer dans une grosse div, etc).

Voici mon code (de débutante, désolée si c'est "grossier", n'hésitez d'ailleurs pas à me corriger).

Merci beaucoup.

<script type="text/javascript">

function agrandir(image) {
	if (image.width=="450" && image.height=="225") {
		image.style.zIndex=2;
		image.width="800";
		image.height="400";
	}
	else {
		if (image.width=="800" && image.height=="400") {
			image.width="450";
			image.height="225";
			image.style.zIndex=0;
		}
	}

}

</script>

<div id="divimage1" style="position: absolute; width:47%; top: 500px; text-align:left;">
<img src="image1.jpg" height="225" width="450"  onclick="agrandir(this);"/>
</div>

<div id="divimage2" style="position: absolute; width:47%; top: 500px; text-align:right;  margin-left:500px;">
<img src="image2.jpg" height="225" width="450"  onclick="agrandir(this);"/>
</div>

Modifié par flap (25 Aug 2009 - 11:30)

Hellow,

Regarde du coté de ce site...
Il y a tout ce qu'il faut il me semble.
http://www.cabel.name/2008/02/fancyzoom-10.html

J'espère que c'est ce que tu recherches.

Bon dév.

Ca semble bien être ce que je cherche, je vais regarder leur code ce soir.

Merci beaucoup !


Edit : résolu, merci beaucoup !
Modifié par flap (25 Aug 2009 - 11:30)