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.

Agrandissement d' image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager