Discussion :

[JulesB]

Bonjour,
Tout d'abord salut à tous les membres de ce forum et merci de m'aider pour mon premier post !
j'ai écrit une petite classe pour agrandir/réduire une image, mais j'éprouve quelques problèmes de performances:
lors de mouseover/mouseout successifs et rapides sur une image, elle finit toujours par se bloquer à sa taille maximale...
voici la classe zoom.js :

Code js :

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
 
function Zoom(img,finalRatio){
	this.image = img;
	this.ratio = finalRatio;
	this.origWidth;
	this.origHeight;
	this.finalWidth;
	this.finalHeight;
	this.zoomInInt;
	this.zoomOutInt;
	var _this = this;
	this.image.onload = function(){
		this.style.cursor = "pointer";
		_this.origWidth = this.width;
		_this.origHeight = this.height;
		_this.finalWidth =  _this.origWidth / _this.ratio;
		_this.finalHeight =  _this.origHeight / _this.ratio;
		this.width = _this.finalWidth;
		this.height = _this.finalHeight;
	}
	this.image.onmouseover = function(){
		_this.zoomInInt = window.setInterval(function(){_this.zoomIn();},30);
	}
	this.image.onmouseout = function(){
		_this.zoomOutInt = window.setInterval(function(){_this.zoomOut();},30);
	}
}
Zoom.prototype.zoomIn = function(){
	clearInterval(this.zoomOutInt);
	var distW = this.origWidth - this.image.width;
	var distH = this.origHeight - this.image.height;
	this.image.width += distW / 2;
	this.image.height += distH / 2;
	if(distW <= 10){
		this.image.width = this.origWidth;
		this.image.height = this.origHeight;
		clearInterval(this.zoomInInt);
	}
}
Zoom.prototype.zoomOut = function(){
	clearInterval(this.zoomInInt);
	var distW = this.image.width - this.finalWidth;
	var distH = this.image.height - this.finalHeight;
	this.image.width -= distW / 2;
	this.image.height -= distH / 2;
	if(distW <= 10){
		this.image.width = this.finalWidth;
		this.image.height = this.finalHeight;
		clearInterval(this.zoomOutInt);
	}
}

et l'instanciation dans la page html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script src="zoom.js" type="text/javascript"></script>
<!-- les images -->
<img src="image1.jpg" name="image1"/>
<img src="image2.jpg" name="image2"/>
<!-- le script -->
<script type="text/javascript">
    for (i=1; i < nbImages; i++){
        window["zoom"+i] = new Zoom(document["image"+i],2);
    }
</script>

PS: le BBcode ne reconnait pas le js dans du html...

[JulesB]

8 lectures en trois jours...
Ca interresse donc personne ?