Agrandissement d' image

**Tora21** · 21/07/2011, 09h20

Salut à tous,
Je suis débutant JavaScript, je l'apprend en autodidacte, et j'ai un petit soucis qui concerne l'agrandissement d'une image.

Ce que je veux faire c'est afficher une image, et lorsque je clic dessus elle s’agrandit.

voici le code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
  <title>Diaporama.V1.0</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript">
		<!--
			function agrandisMoiCa(img){
				if(typeof img == "string")
					img = document.getElementById(img);
				img.width = "70%";
				img.height = "70%";
				return img;
			}
		//-->
	</script>
</head>
 
<body>
	<center><h1>Diaporama</h1></center>
	<br /><br />
	<center><p>Cette page doit afficher des images, et lorsqu'un clic est effectué dessus, 
	elles doivent apparaître en taille agrandie.</p></center>
	<br /><br />
	<center><img src="iop1.jpg" alt="iop1.jpg" height="10%" width="10%" onclick="agrandisMoiCa('uneImage1');" id="uneImage1">
	<img src="iop2.jpg" alt="iop2.jpg" height="10%" width="10%" onclick="agrandisMoiCa('uneImage2');" id ="uneImage2"></center>
 
	<script type="text/javascript">
		<!--
		//-->
	</script>
</body>

Voici le code prêt à être testé.
Je n'ai pas d'erreur à l’exécution, j'affiche une image en taille réduite, et en cliquant dessus elle doit passer de 10% à 70%, mais en fait elle disparaît.

Un petite solution?

**Rctiste** · 21/07/2011, 10h18

Bonjour Tora21,

Au lieu de passer par un javascript pourquoi n'utilise tu pas ça :

Code :

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

1
2
 
<img src="iop2.jpg" alt="iop2.jpg" height="10%" width="10%" onclick="this.height=200; this.width='500'" id ="uneImage2">

**SpaceFrog** · 21/07/2011, 10h20

Au lieu de passer par un javascript pourquoi n'utilise tu pas ça :

Code :

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

onclick="this.height=200; this.width='500'"

ha bon parce que c'est pas du javascript ça ?

sinon style.width...
et pourquoi return ?

Code :

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

1
2
3
4
5
6
7
function agrandisMoiCa(img){
				if(typeof img == "string")
					img = document.getElementById(img);
				img.style.width = "70%";
				img.style.height = "70%";
 
			}

**Rctiste** · 21/07/2011, 10h24

Je voulais dire au lien de passer par une fonction javascript (externe).

**SpaceFrog** · 21/07/2011, 10h25

il est préférable de passer par une fonction externe afin d'avoir un code non intrusif.
Il est aussi préférable d'utiliser les propréité de style plutot que les attributs height et width ...

**Rctiste** · 21/07/2011, 10h27

D'accord, merci de l'info.

**Tora21** · 21/07/2011, 10h55

Merci c'est nickel.
Pourquoi le return? ben parce que j'étais bourré.
Je suis à moitié sur l'éclipse pour le java, à moitié sur le notePad pour le javascript, alors en ce moment il m'arrive de faire des truc bizarre avec des alert au lieu de sysout, ou je me retrouve à appuyer sur ctrl + espace dans note-pad, et j'insulte le pc parce qu'il me lance pas l'auto-implémentation.

Faut que je dorme...

**hic8716** · 28/07/2011, 13h09

Bonjour tout le monde,
Je suis débutante en HTML5, j'ai réalisé une petite page qui permet de sélectionner des images et de les mettre dans une zone en vignettes.
J'aimerais bien que lors d'un Click de souris, l'image s'agrandit dans une zone de la page
Merci d'avance de votre aide
Voici le code source de ma page(il marche que sur Mozilla FireFOX)!!
Je suis vraiment besoin de votre aide

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<html> 
<head> 
<title>HTML5:Palette d'images </title> 
 
<STYLE TYPE="text/css"> 
<!-- 
TD{font-family: Arial, Helvetica, sans-serif; font-size: 8pt;} 
---> 
</STYLE> 
 
<style type="text/css"> 
<!-- 
 
 
.bandehaute { 
//fond de la bande 
background-color: #7B7B7B; //couleur grise 
background-position: 0px -545px; 
//sépare le contenu d'un élément de sa bordure gauche. 
padding-left: 10px; 
font-weight: bold; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 1px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: solid; 
border-left-style: none; 
//la couleur de la bordure 
border-top-color: #B06C27; 
border-bottom-color: #B06C27; 
//la taille du titre 
font-size: 12px; 
} 
.remplissage { 
margin: 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-bottom: 0px; 
padding-left: 10px; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
 
.bordure { 
border: 1px solid #cccccc; 
} 
 
 
 
.images { //choisir les dimensions des vignettes 
height:150px; 
width:150px; 
border:0px; 
margin:15px 15px 0 0; 
 
} 
--> 
</style> 
 
<style type="text/css"> 
 
table, td 
{ 
border-color: #7B7B7B; 
border-style: solid; 
} 
</style> 
 
<script> 
//la fonction permettant de selectionner les images 
function SelectionImage(mesFichiers) { 
for (var i = 0, f; f = mesFichiers[i]; i++) { 
var imageReader = new FileReader(); 
imageReader.onload = (function(fichier) { 
return function(e) { 
var span = document.createElement('span'); 
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', fichier.name, '"/>'].join(''); 
document.getElementById('thumbs').insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
//fonction qui permet de déposer les images 
function deposer(e) { 
SelectionImage(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
} 
 
 
</script> 
 
</head> 
 
<body> 
 
 
 
<center> 
<!-- width largeur de la bande, largeur du bord 
- cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau 
- cellspacing : Spécifie l'espace en pixels entre les cellules du tableau --> 
<table width="700" border="10" cellspacing=1 cellpadding=5> 
<tr bgcolor="#5D292D"> 
<!-- placement du titre a gauche --> 
<td class="bandehaute" align="left"> 
<p>Palette miniatures d'images</p> 
</td> 
</tr> 
<tr> 
<!-- //aligner les images du gauche à droite --> 
<td align="left" height="105" ondragenter="return false" ondragover="return false" ondrop="deposer(event)"> <output id="thumbs"></output> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<!-- //bouton parcourir avec choix multiple --> 
<p> Glisser-déposer ou choisir des images : <input type="file" id="input" size="10" multiple="true" onchange="SelectionImage(this.files)" /></p> 
</td> 
</tr> 
</table> 
</center> 
 
</body> 
</html>

Agrandissement d' image

JavaScript

Discussions similaires

Partager

Partager