Aggrandir et diminuer une image onMouseOver

Version imprimable

23/06/2009, 10h44
NuX_O

Aggrandir et diminuer une image onMouseOver

Bonjour :)

Je n'y connais pas grand chose en JS, mais je m'y lance.

Je voudrai faire en sorte qu'en passant la sourie sur une image celle-ci puisse s'aggrandire et en onMouseOut puisse diminuer. exactement le même effet qu'ici : (sauf que c'est du flash)

j'ai trouvé sur scriptaculous des script JS qui se rapprocherait de mes attentes, le soucis est qu'ils fonctionnent avec onClick, mes tests en onMouseOver ont l'air de lancer plusieurs fois la fonction du Grow().
voilà le résultat : c'est une honte... c'est horrible...

et le lien vers le fichier JS :le fichier javascript...

j'ai un peu tout tenté, sans succès...

un grand merci à ceux qui pourront m'aiguiller ou me dépanner :ccool:

une petite explication ne serait pas de refus, effectivement, je ne comprend pas pourquoi il y a récursivité au niveau de la fonction Grow().

:calim2:

merci:D

sinon sans librairie :

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			ul{
				list-style:none;
			}
			ul li{
				float:left;
				margin : 10px;
				position:relative;
				width:100px;
				height:100px;
			}
			ul li img{
				position:absolute;
			}
		</style>
 
		<script type="text/javascript">
			function initImage(contentId){
				var conteneur = document.getElementById(contentId);
				var ListeImage = conteneur.getElementsByTagName("img");
				for (var i = 0, l = ListeImage.length; i < l; i++) {
 
					var element = ListeImage[i];
					var action = function(){
						var t = i ;
						var x = element
						x.timer = null;
						x.startX = parseInt(x.width);
						c = (1000 / 50);
						d = Math.round(400 / c);
						w = new Array();
						for (var i = 1; i <= d; i++) {
							w.push(easeInOutSine(i * c, x.startX, x.startX+50 - x.startX, 400))
						}
						x.w = w ;
 
						return function(){
							x.currentStepX = 0 ;
							x.currentStepY = 0 ; 
							go(x,c,false);
						};
					}(i,element);
 
					var action2 = function(){
						var x = element
						c = (1000 / 50);
						return function(){
							x.currentStepX = x.currentStepX-1 ;
							x.currentStepY = x.currentStepY-1 ; 
							go(x,c,true);
						};
					}(i,element);
 
					ListeImage[i].onmouseover = action;
					ListeImage[i].onmouseout = action2;
				}
			}
 
			function EffectOpen(element){
 
			}
			function easeInOutSine(t, b, c, d) {
				return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
			}
 
 
			function go(b, c, out) {
				if(b.timer != null){
					window.clearInterval(b.timer);
					b.timer = null;
				}
				b.timer = window.setInterval(function() {
				var a = true;
				if (b.w[b.currentStepX]) {
					b.style['width'] = b.w[b.currentStepX] + 'px';
				if (b.center) {
					b.style['left'] = ( - (b.w[b.currentStepX] / 2)) + 'px'
				}
				if(!out){
					b.currentStepX++;
				}
				else{
					b.currentStepX--;
				}
				a = false
				}
				if (a) {
					window.clearInterval(b.timer);
					b.timer = null;
					return
				}
				}, c);
			}
		</script>
	</head>
	<body onload="initImage('mesimages')">
		<ul id="mesimages">
			<li><img src="diapo_mini/images/diapo1.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo2.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo3.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo4.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo5.jpg" width="100px;" /></li>
		</ul>
	</body>
</html>

tu n'as plus qu'a le fignoler :)

24/06/2009, 11h24
NuX_O

Merci pour ta réponse, je lutte un peu pour personnaliser le tout :aie: en fait, il y a certaines instructions que je ne comprends pas (j'ai pas mal de lacunes en maths, j'avoue c'est difficile pour moi de me concentrer...) comme :

c = (1000 / 50); // pourquoi 1000/50 = 20 a quoi ca se refere ??
d = Math.round(400 / c);// resultat est 20 ??? a quoi ca se refere ???

ces données sont réutilisés dans la fonction go(b(qui est l'element), c, out(booleen))

J'ai fais pas mal de Java, mais j'avoue que mon frein sont les maths, c'est un peu pourquoi le JS me fait un peu flipper :calim2:

j'aimerai que l'aggrandissement se fasse par le centre de l'image et non sur le coin gauche... j'ai beau chercher, je suis vite perdu dans les fonctions mathématiques :oops:

merci pour ton aide :mouarf:

J'ai modifié et commenté le script en fonction des problèmes que tu as rencontré et ajouté le centrage ;)

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			ul{
				list-style:none;
			}
			ul li{
				float:left;
				margin : 10px;
				position:relative;
				width:100px;
				height:100px;
				border:1px solid red;
			}
			ul li img{
				position:absolute;
				left:50%;
				margin-left:-50px;
				top:50%;
			}
		</style>
 
		<script type="text/javascript">
			function initImage(contentId){
				var conteneur = document.getElementById(contentId);
				var ListeImage = conteneur.getElementsByTagName("img");
				for (var i = 0, l = ListeImage.length; i < l; i++) {
 
					var element = ListeImage[i];
 
					//On centre l'élément de façon vertical en fonction de sa hauteur
					element.style.marginTop = ( - (element.offsetHeight / 2)) + 'px'
 
					var action = function(){
						var t = i ;
						var x = element
						//Speed définit combien de temps l'effet doit durer :)
						var Speed = 250 ;
						x.timer = null;
						x.startX = parseInt(x.width);
						//c corespond au temps en ms pour l'appel de la méthode go ici 20ms
						c = (1000 / 50);
						//Math.round arrondi à l'entier supérieur
						d = Math.round(Speed / c);
						w = new Array();
						for (var i = 1; i <= d; i++) {
							//Le 50 indique qu'as partir de la taille originale on ajoute 50px
							w.push(easeInOutSine(i * c, x.startX, x.startX+50 - x.startX, Speed))
						}
						x.w = w ;
 
						return function(){
							x.currentStepX = 0 ;
							x.currentStepY = 0 ; 
							go(x,c,false);
						};
					}(i,element);
 
					var action2 = function(){
						var x = element
						c = (200 / 50);
						return function(){
							x.currentStepX = x.currentStepX-1 ;
							x.currentStepY = x.currentStepY-1 ; 
							go(x,c,true);
						};
					}(i,element);
 
					ListeImage[i].onmouseover = action;
					ListeImage[i].onmouseout = action2;
				}
			}
 
			function EffectOpen(element){
 
			}
			function easeInOutSine(t, b, c, d) {
				//Fonction mathématique permettant de calculer un effet fluide au niveau des pas d'agrandissement
				return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
			}
 
 
			function go(b, c, out) {
				if(b.timer != null){
					window.clearInterval(b.timer);
					b.timer = null;
				}
				b.timer = window.setInterval(function() {
				var a = true;
				if (b.w[b.currentStepX]) {
					//On augmente la taille
					b.style['width'] = b.w[b.currentStepX] + 'px';
					//On positionne de façon centré par rapport au conteneur
					b.style.marginLeft = ( - (b.w[b.currentStepX] / 2)) + 'px'
					b.style.marginTop = ( - (b.offsetHeight / 2)) + 'px'
 
				if(!out){
					b.currentStepX++;
				}
				else{
					b.currentStepX--;
				}
				a = false
				}
				if (a) {
					window.clearInterval(b.timer);
					b.timer = null;
					return
				}
				}, c);
			}
		</script>
	</head>
	<body onload="initImage('mesimages')">
		<ul id="mesimages">
			<li><img src="diapo_mini/images/diapo1.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo2.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo3.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo4.jpg" width="100px;" /></li>
			<li><img src="diapo_mini/images/diapo5.jpg" width="100px;" /></li>
		</ul>
	</body>
</html>

Je suis peut-être hors sujet mais il n'y a pas besoin de JS pour réaliser ce genre d'effet...

exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ... <head> ... <style> .zoom img {width:150px; height:50px;} .zoom:hover img {width:300px; height:100px;} </style> </head> <html> <body> ... <a id="pour-le-zoom" class="zoom"><img src="MonImage" /></a> ... </body> </html>
devyan.

24/06/2009, 15h48
E.Bzz

Bonjour,

Citation:

Envoyé par devyan

Je suis peut-être hors sujet mais il n'y a pas besoin de JS pour réaliser ce genre d'effet...

hélas, pour IE (au moins jusqu'au 6), si ...

Il ne reconnait le :hover que sur les <a> :calim2:

A+
24/06/2009, 15h49
le_chomeur

tu n'es pas hors sujet je te rassure, juste qu'ici on essaye de rendre ça "ergonomique" avec un effet de style ;-)
24/06/2009, 15h58
devyan

Citation:

Envoyé par E.Bzz

Bonjour,
hélas, pour IE (au moins jusqu'au 6), si ...

Il ne reconnait le :hover que sur les <a> :calim2:

A+

C'est bien pourquoi j'ai mis une balise <a> autour de l'image ;)

Citation:

Envoyé par le_chomeur

tu n'es pas hors sujet je te rassure, juste qu'ici on essaye de rendre ça "ergonomique" avec un effet de style ;-)

Effectivement si l'on désire avoir un effet de zoom progressif, il faut passer par du javascript :)
24/06/2009, 16h08
E.Bzz

Citation:

Envoyé par devyan

C'est bien pourquoi j'ai mis une balise <a> autour de l'image ;)

Arf ! :aie:

Au temps pour moi .... :oops:
25/06/2009, 09h20
NuX_O

Un grand merci à vous :ccool:

merci à toi le_chomeur d'avoir pris le temps de commenter le code :ccool:franchement merci :mouarf:ça me permettra de mieux comprendre c'est ce qui me plait :mouarf:

merci à vous pour votre patience :ccool:

:calim2: oulalala la fonction mathématique c'est toi qui l'as trouvé ? je sens que si je veux me lancer dans des effets JS je risque de souffrir, car jamais je n'aurai trouvé cette fonction... :calim2:

merci encore :ccool:
25/06/2009, 09h58
le_chomeur

non la fonction mathématique n'est pas de mon ressort ;-)
j'ai utilisé les équations de robert penner, adapté en javascript : http://www.robertpenner.com/easing/
^^
20/09/2009, 17h10
NastyG88

Bonjour à tous les utilisateurs.

Je souhaite intégrer ce script à mon site pour faire un aperçu des familles de produits..

J'ai donc fait un test en mettant des photos pour voir ce que cela donne et il semble fonctionner très bien dans une page vide: http://www.under21pro.com/site/image...es/Script.html

Par contre en insérant ce même script, sans rien toucher, dans une des page de mon site, il se produit des choses pour le moins bizarres !!!

Les problèmes sont différents selon le navigateur mais que ce soit firefox ou ie une chose est claire: le script ne fonctionne pas sur mon site.

Pouvez-vous jeter un oeil ? J'ai fais un test: http://www.under21pro.com/boutique/c...-outillage.cfm