redimensionner une image

**yokuan** · 23/12/2010, 11h18

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 :

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

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

**Bovino** · 23/12/2010, 11h23

Code :

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

onClick=agrandir_image(rouge.jpeg)

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 !

**yokuan** · 23/12/2010, 11h26

il n'y a rien qui se passe au clique en effet

**Vil'Coyote** · 23/12/2010, 11h30

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"

Invité · 23/12/2010, 12h11

sa doit ressembler a ca

Code :

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

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>

redimensionner une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager