redimensionner une image

Version imprimable

bonjour mon soucis est simple je voudrais redimensionner une image avec des valeurs de largeur et hauteur saisies dans un formulaire mais je n'y arrive pas.
Voilà ce que j'ai fait pour le moment.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
 
	<head>
		<title>exo2</title>
 
		<script type="text/JavaScript">
 
			function agrandir_image(objet)
				{
					objet.width = document.getElementById("hauteur").value;
                    objet.height = document.getElementById("largeur").value;
				}
		</script>
	</head>
 
	<body>
 
			<center>
				<strong>Contrôler la boîte</strong>
 
				<form method="POST" name="formulaire">
				Hauteur<input type="text" name="hauteur"><br/>
				Largeur<input type="text" name="largeur"><br/>
				<input type="submit" name="Envoyer" value="Soumettre" onClick=agrandir_image(rouge.jpeg)><br/><br/>
				<img src="rouge.jpeg">
			</center>
 
 
 
 
	</body>
 
</html>

Cordialement

23/12/2010, 11h23
Bovino

Code:

onClick=agrandir_image(rouge.jpeg)

:no:

Tout d'abord, les valeurs d'attributs se mettent entre guillemets.
Ensuite, rouge.jpeg, je doute que JavaScript puisse comprendre à quoi tu fais allusion... Pour lui, rouge dans ce contexte est une variable et jpeg une propriété de cette variable ! On est loin de ce que tu attends probablement !
23/12/2010, 11h26
yokuan

il n'y a rien qui se passe au clique en effet :)
23/12/2010, 11h30
Vil'Coyote

bon :

1 ) document.getElementById("hauteur").value >> t'as pas l'impression qu'il manque un id quelque part? éventuellement dans tes input et ton image?

2 ) rouge.jpeg dans l'appel de ta fonction. franchement, tu crois que ton script va connaitre l'image grace à son nom? définie lui un id et passe l'id à la fonction.

3 ) enfin, un boutton submit sert à envoyer un formulaire, donc tu ne risque pas de faire grand chose. remplace le par un type "buton"

sa doit ressembler a ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<html>
 <head>
<title>exo2</title>
 
<script type="text/JavaScript">
 
function agrandir_image(objet)
{
objet_width = document.getElementById("largeur").value;
objet_height = document.getElementById("hauteur").value;
 
document.getElementById("monimage").style.height=objet_height+'px'
document.getElementById("monimage").style.width=objet_width+'px'
 
}
</script>
</head>
 
<body>
 
<center>
<strong>Contrôler la boîte</strong>
 
<div>
 
Hauteur<input type="text" id="hauteur"><br/>
 
Largeur<input type="text" id="largeur"><br/>
 
<input type=button" onclick='agrandir_image()'><br/><br/>
 
<img src="rouge.jpeg" id='monimage'>
 
</div>
			</center>
 
 
 
 
	</body>
 
</html>