[JavaScript] Déplacement dans une image style Google Maps.

[Bovino]

Vous avez tous vu une carte Google : on clique sur la carte pour la déplacer et le déplacement est synchronisé sur une petite vignette.

C'est le script que je vous propose ajourd'hui avec une image.

Le code n'est pas commenté car je compte faire un tuto pour en expliquer les principes et le fonctionnement.

Du coup, n'hésitez pas à me rapporter les bugs que vous pourriez constater
Il en reste un gros que j'ai du mal à résoudre : sur certains navigateurs, si l'on clique sur la partie cachée de l'image, celle-ci se sélectionne...

Le code :

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
var Clipper = function(tgtImg,opts){
	this.image = this.getConteneur(tgtImg);
	if(!this.image){
		return false;
	}
	var that = this;
	this.haveThumb = opts.haveThumb && this.initThumb(opts.thumbId);
	this.speed = opts.speed || 1;
	this.currentX = 0;
	this.currentY = 0;
	this.minX = this.image.parentNode.clientWidth - this.image.width;
	this.minY = this.image.parentNode.clientHeight - this.image.height;
	this.origX = 0;
	this.origY = 0;
	this.image.parentNode.onmousedown = function(e1){
		var evt = window.event || e1;
		that.origX = evt.clientX;
		that.origY = evt.clientY;
		that.image.onmousemove = function(e2){
			var evt2 = window.event || e2;
			var dX = (evt2.clientX - that.origX) * that.speed;
			var dY = (evt2.clientY - that.origY) * that.speed;
			dX += that.currentX;
			dY += that.currentY;
			dX = Math.min(dX,0);
			dX = Math.max(dX,that.minX);
			dY = Math.min(dY,0);
			dY = Math.max(dY,that.minY);
			that.currentX = dX;
			that.currentY = dY;
			that.origX = evt2.clientX;
			that.origY = evt2.clientY;
			that.image.style.marginLeft = dX + 'px';
			that.image.style.marginTop = dY + 'px';
			if(that.haveThumb){
				that.cadre.style.left = (Math.abs(dX/that.ratioX)-3)+'px';
				that.cadre.style.top = (Math.abs(dY/that.ratioY)-3)+'px';
			}
		};
	};
	this.image.onmouseup = function(){
		that.image.onmousemove = null;
	};
	this.image.onmouseout = function(){
		that.image.onmousemove = null;
	};
	this.image.ondragstart = function(){return false;};
};
Clipper.prototype.getConteneur = function(conteneur){
	if(conteneur.tagName){
		return conteneur;
	}
	else if(typeof conteneur === 'string'){
		return document.getElementById(conteneur);
	}
	else{
		return false;
	}
};
Clipper.prototype.initThumb = function(thImg){
	this.thumb = this.getConteneur(thImg);
	if(!this.thumb.tagName || this.thumb.tagName.toLowerCase()!=='img'){
		return false;
	}
	var that = this;
	this.thumb.parentNode.style.position = 'relative';
	this.thumb.parentNode.style.width = this.thumb.width + 'px';
	this.thumb.parentNode.style.height = this.thumb.height + 'px';
	this.ratioX = this.image.width / this.thumb.width;
	this.ratioY = this.image.height / this.thumb.height;
	this.cadre = document.createElement('div');
	this.cadreWidth = this.image.parentNode.clientWidth / this.ratioX;
	this.cadreHeight = this.image.parentNode.clientHeight / this.ratioY;
	this.refX = this.thumb.parentNode.offsetLeft;
	this.refY = this.thumb.parentNode.offsetTop;
	this.thumbMinX = this.refX + this.thumb.width - this.cadreWidth;
	this.thumbMinY = this.refY + this.thumb.height - this.cadreHeight;
	this.cadre.style.cssText = 'background-image:url(transp.gif);position:absolute;top:-3px;left:-3px;width:'+this.cadreWidth+'px;height:'+this.cadreHeight+'px;border:3px solid yellow;cursor:move;';
	this.thumb.parentNode.appendChild(this.cadre);
	this.cadre.onmousedown = function(){
		that.cadre.onmousemove = function(e4){
			var evt4 = window.event || e4;
			var dX = Math.max(evt4.clientX - that.cadreWidth/2,that.refX);
			dX = Math.min(dX,that.thumbMinX);
			dX = dX - that.refX;
			var dY = Math.max(evt4.clientY - that.cadreHeight/2,that.refY);
			dY = Math.min(dY,that.thumbMinY);
			dY = dY - that.refY;
			that.cadre.style.left = (dX - 3) + 'px';
			that.cadre.style.top = (dY - 3) + 'px';
			that.currentX = -dX * that.ratioX;
			that.currentY = -dY * that.ratioY;
			that.image.style.marginLeft = that.currentX + 'px';
			that.image.style.marginTop = that.currentY + 'px';
		};
	};
	this.cadre.onmouseup = function(){
		that.cadre.onmousemove = null;
	};
	this.thumb.onmouseout = function(){
		that.cadre.onmousemove = null;
	};
	this.thumb.ondragstart = function(){return false;};
	this.cadre.ondragstart = function(){return false;};
	return true;
};
window.onload = function(){window.myClip = new Clipper('clip',{speed:5,haveThumb:true,thumbId:'thumbImg'});};

En gros, il faut placer les deux images (attention aux proportions) dans des div de taille quelconque, le premier paramètre correspond à l'objet HTML contenant l'image ou à son id, puis en paramètres :

• speed : coefficient de déplacement de l'image.
• haveThumb : y a-t-il une vignette ?
• thumbId : si oui, son id.

Précision, le script se charge de créer le cadre sur la vignette en calculant les proportions de celui-ci.

Voir une démo en ligne : http://dmouronval.developpez.com/clipper/

[javatwister]

c'est d'une beauté époustouflante!

et concis en plus


comme quoi, JS a bien un avenir!

[danielhagnoul]

Bonsoir

Un beau travail, je vais le garder à l'oeil

Question bug, sous Chrome 9 lorsqu’on déplace le curseur et que l'on sort de l'image ou de la vignette il se produit souvent des effets indésirables.

Dans un cas, j'ai déplacé le curseur sur l'image OK. Ensuite, j'ai été sur la vignette et au clic le cadre est parti se bloquer en haut à droite. J'ai dû rafraîchir la page.

Avec Firefox 3.6.13 pas de soucis.

[SpaceFrog]

Ce qui est appréciable dans l'ergonomie c'est le drag sur les deux images !

Très joli Beef

Envoyé par Daniel

je vais le garder à l'oeil

tu vas nous le jqueriser ?

[NoSmoking]

Bonjour,
je découvre la section Contribuez et me permets de faire quelques remarques constructives.

Pour éviter la sélection lorsque l'on sort de l'image vignette, il convient de stopper l'action par défaut du document lors de ses événements mousemove, mousedown et mouseup.

Pour ce faire, dans la fonction this.cadre.onmousedown = function(){... le blocage peut ce faire en ajoutant

Code :

1
2
3
addEvent( document, 'mousemove', preventEvent);
addEvent( document, 'mousedown', preventEvent);
addEvent( document, 'mouseup',   function(){that.cadre.onmousemove=null;});

Nul doute que tu sauras ce que représente les functions addEvent et preventEvent.

Concernant l'ajout sur sur le mouseup c'est pour ce garantir, lorsque l'on quitte la vignette et que l'on relâche la mouse, contre la reprise du déplacement au survol de cette dernière.

Enfin dernier point, suppression de l'annulation sur le mouseout, afin que lorsque l'on revient sur la vignette celle ci soit encore active si l'on n'a pas relâché la mouse

Code :

1
2
3
this.thumb.onmouseout = function(){
//that.cadre.onmousemove = null;
};

...mais ce dernier point reste à l'appréciation de chacun.

J'en ai oublié l'essentiel, Bravo pour ce script.

[le_chomeur]

Bug sous chrome : si je scroll sur la grande image que je sort du cadre et reviens dedans , l'évènement est stoppé je dois re-cliquer dessus

très beau, propre et simple

[binary010011]

Bravo pour ce script!
Pourriez-vous me dire quels paramètres sont à modifier pour que, par exemple, le cadre de déplacement du zoom ne soit pas positionné en haut, à droite comme pas défaut dans le script mais au milieux?
Par avance, un grand merci

[Bovino]

Envoyé par binary010011

Bravo pour ce script!
Pourriez-vous me dire quels paramètres sont à modifier pour que, par exemple, le cadre de déplacement du zoom ne soit pas positionné en haut, à droite comme pas défaut dans le script mais au milieux?
Par avance, un grand merci

Il faut jouer sur les valeurs top et left de la ligne 78

[OnaStick]

Bonjour Bovino,

Ce script m'a été d'une aide très précieuse. Cependant, il y a encore deux choses que je n'arrive pas à mettre en place.

La première chose est de pouvoir définir une position d'origine à l'image qui n'est pas top 0 et left 0 dans le sens ou, par exemple au chargement de la page, la position a afficher est recuperé en ajax. Dans votre script, si on change les valeur top et left dans le style css, c'est cette position qui sert de départ, et on ne peut plus scroll la totalité de l'image.

La seconde chaude est de réussir à centrer cette position au milieu du div conteneur.

J'avoue ne pas avoir compri la totalité des manipulations effectuées dans votre script, malgré des recherches assidu, je ne comprends toujours pas à quoi correspond certains calculs.

Je dois également précisé que je n'utilise que les deux premieres methodes de votre script. Pas de miniature.

[Edit] J'ai réussi pour la premeire parti, en modifiant les variables "current" par la position souhaiter, je check ensuite si ces variables so nt differente de zero, et si oui, je place directement l'image au bon endroit.

Code javascript :

1
2
3
 
this.currentX = opts.posX || 0;
this.currentY = opts.posY || 0;

et

Code javascript :

1
2
3
4
5
 
       if(this.currentX !=0 && this.currentY !=0){
            that.image.style.marginLeft = this.currentX + 'px';
            that.image.style.marginTop = this.currentY + 'px';
        }

Juste avant le onmousedown

Je pense donc qu'a partir de là, un simple calcul devrait me permetre de centrer cette position. Je continue de chercher.

[Edit1]Et bien j'ai réussi, en ajoutant simplement la moitié de la largeur et de la hauteur de mon conteneur aux variables current.

Cordialement,
Stick.

[jordy82]

Bonjour,

Merci pour votre topic, il m'a été très utile!
Mais j'aurais besoin d'une adaptation pour mobile et tablette... Avec cette version du clipper, on ne peut pas faire défiler les images avec les écrans tactiles. Si vous avez quelques tuyaux je suis preneur.

Merci