Zoom sur une image

**mariemor64** · 23/05/2006, 15h14

Je voudrais que lorsque je clique sur une image dans ma page web, ça me la zoom.
Mais je ne connais pas les dimensions de mes images...
D'où mon problème!

**KiLVaiDeN** · 23/05/2006, 15h16

Envoyé par mariemor64

Je

"pense donc je suis" ?

**Sheriff** · 23/05/2006, 19h53

salut !
les dimensions de ton images sont contenues dans les propriétés style.width et style.height de l'objet image... Exemple pratique

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
 
<html>
<head>
<title>dimensions image</title>
<script type=text/javascript>
function dimensions(image){
alert ('largeur : '+image.width+'\n'+'hauteur : '+image.height);
}
function zoomplus(image){
image.width=200;
image.height=400;
}
</script>
</head>
<body>
<a href="javascript:void(0)"><img src=url width=100 height=200 border=0 onclick="dimensions(this)"></a>
<a href="javascript:void(0)"><img src=url width=100 height=200 border=0 onclick="zoomplus(this)"></a>
</body>
</html>

Tu peux à présent définir une fonction zoom_moins et faire tout ce que tu veux : par exemple cliquer sur une image pour l'agrandir et recliquer dessus pour la réduire, ça dépend de toi !
@+

**mariemor64** · 24/05/2006, 15h00

Mon problème, c'est que je ne veux pas définir de taille à l'affichage de mon image comme tu l'as fait

Code :

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

img src=url width=100 height=200

Mais je veux pouvoir cliquer sur l'image et que ça me la zoom

**krolineeee** · 24/05/2006, 15h10

tu as essayé d'utiliser les % ?
un truc dans le genre :
function zoomplus(image){
image.width='200%';
image.height='400%';
}

**KiLVaiDeN** · 24/05/2006, 15h40

Peut-être en la mettant avec un valeur en pourcentage comme te le suggère kroline..

Sinon, le meilleur moyen serait de préloader chaque image dans une zone, de récupérer à chaque fois la valeur du width et du height généré automatiquement et de le stocké dans un tableau associatif id_image -> width,height, et ensuite de se servir de ce tableau pour zoomer.

C'est un peu compliqué, mais il n'y a pas d'autre moyen simple en Javascript pur, car tu ne peux pas récupérer des informations sur les images.

Une dernière solution serait de calculer la taille des images coté serveur afin de créer ce tableau associatif dès le début sans avoir à utiliser une zone pour preloader les images : plus fonctionnel..

**krolineeee** · 24/05/2006, 15h45

Si tu as la taille de départ, tu peux toujours faire un truc dans le genre:

Code :

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

1
2
3
4
5
6
7
 
<img src='' onclick='zoomplus(this, this.height, this.width) height='12' width='25'>
 
function zoomplus(image,h,w){
image.width=w*10;
image.height=h*10;
}

**Sheriff** · 26/05/2006, 20h47

salut !
il y a toujours une taille de départ !
par défaut le navigateur prend la taille d'origine de ton image.
tu peux reformater la fonction pour faire un zoom_fact, c'est à dire agrandir petit à petit et vice versa (voir le code de krolineeee), mais le principe reste le même...
tu peux même donner la taille initiale de ton image via un code js, ça dépend de toi.

Code :

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

1
2
<img src=url name=monimage><script type=text/javascript>document.monimage.width=largeur;
document.monimage.height=hauteur;</script>

...
@+

Zoom sur une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager