11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Zoom d'image tout simple, fonctionne pas.

Bonjour voici le code servant normalement à zommer une image comme ceci :
click -> zoom
reclick -> dezoom

Merci de m'éclairer Smiley lol 

<html>
	<head>
		<script type="text/javascript">
		var zoomed=0;
		
		function zoom(id,hauteur_max,largeur_max,hauteur,largeur)
		{		
			// Si l'image n'est pas zoomée
			if(zoomed == 0)
			{
				document.getElementById(id).style.width = largeur_max+'px';
				document.getElementById(id).style.height = hauteur_max+'px';
				zoomed = 1;
				
			}
			// Si elle est zoomée
			if (zoomed == 1)
			{
				document.getElementById(id).style.width = largeur+'px';
				document.getElementById(id).style.height = hauteur+'px';
				zoomed = 0;
			}		
		}	
		</script>
	</head>
<body>

<img id="images/header.jpg" src="images/header.jpg" style="cursor:pointer;width:200px; height:200px;" onclick="javascript:zoom('images/header.jpg','259','771','200','200');" />

</body>
</html>

Modifié par Worm (24 Jan 2007 - 14:12)
Salut,

Je ne vois pas de question dans ton message. Smiley langue

Peux-tu nous expliquer plus précisément ce qui ne fonctionne pas ? Obtiens-tu des erreurs dans les navigateurs avec lesquels tu as testé ?

Soit dit en passant, il ne faut pas mettre le préfixe "javascript:" pour un attribut correspondant à un gestionnaire d'événements (onclick, ...).

De plus, ton problème vient sûrement de l'id que tu utilises ("images/header.jpg"), qui est totalement invalide, ce que tu aurais pu constater grâce à un validateur (X)HTML...
Modifié par Julien Royer (24 Jan 2007 - 13:13)
Désolé, j'ai posté un peu précipitamment et j'ai oublié de poser ma question Smiley sweatdrop . Le code posté au début ne fonctionne tout simplement pas.

J'ai testé sur firefox et je n'obtiens aucune erreur javascript dans la console.

J'ai donc changé l'id de l'image en "img" et enlevé le préfixe "javascript:". Second test, toujours rien, et pas d'erreur non plus Smiley ohwell 

<html>
	<head>
		<script type="text/javascript">
		var zoomed=0;
		
		function zoom(id,hauteur_max,largeur_max,hauteur,largeur)
		{		
			// Si l'image n'est pas zoomée
			if(zoomed == 0)
			{
				document.getElementById(id).style.width = largeur_max+'px';
				document.getElementById(id).style.height = hauteur_max+'px';
				zoomed = 1;
				
			}
			// Si elle est zoomée
			if (zoomed == 1)
			{
				document.getElementById(id).style.width = largeur+'px';
				document.getElementById(id).style.height = hauteur+'px';
				zoomed = 0;
			}		
		}	
		</script>
	</head>
<body>

<img id="img" src="images/header.jpg" style="cursor:pointer;width:200px; height:200px;" onclick="zoom('img','259','771','200','200');" />

</body>
</html>

Modifié par Worm (24 Jan 2007 - 13:20)
En fait ton problème est tout bête, dans ta fonction "zoom", les deux blocs "if" sont exécutés puisque la variable globale "zoomed" change de valeur dans le premier. Il faut que tu utilises un "else" :
			if(zoomed == 0)
			{
				document.getElementById(id).style.width = largeur_max+'px';
				document.getElementById(id).style.height = hauteur_max+'px';
				zoomed = 1;
				
			}
			// Si elle est zoomée
			else
			{
				document.getElementById(id).style.width = largeur+'px';
				document.getElementById(id).style.height = hauteur+'px';
				zoomed = 0;
			}
En passant, je te conseille d'utiliser les attributs "width" et "height" de l'image plutôt que les styles correspondants.

Et puis ce sera beaucoup plus simple si tu stockes le résultat de "document.getElementById(id)" dans une variable locale au début de ta fonction.
En effet c'était tout bête Smiley confused

J'ai placé un var dom = document.getElementById(id); au début de la fonction comme tu me l'as indiqué, et tout fonctionne bien.

Merci Smiley smile
Sujet clos
Aller à