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

Discussions similaires

Partager

Partager