IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

Déplacement dans une image style Google Maps.


Sujet :

Contribuez

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut Déplacement dans une image style Google Maps.


    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 : 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
    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/
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    c'est d'une beauté époustouflante!

    et concis en plus


    comme quoi, JS a bien un avenir!

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Ce qui est appréciable dans l'ergonomie c'est le drag sur les deux images !

    Très joli Beef

    Citation Envoyé par Daniel
    je vais le garder à l'oeil
    tu vas nous le jqueriser ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  7. #7
    Candidat au Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Août 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nièvre (Bourgogne)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 1
    Points : 2
    Points
    2
    Par défaut
    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

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par binary010011 Voir le message
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre à l'essai
    Profil pro
    Inscrit en
    Août 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 29
    Points : 15
    Points
    15
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    this.currentX = opts.posX || 0;
    this.currentY = opts.posY || 0;

    et
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  10. #10
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn et Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2012
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    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

Discussions similaires

  1. Déplacement dans une image
    Par Portus dans le forum jQuery
    Réponses: 2
    Dernier message: 11/12/2012, 12h42
  2. Réponses: 5
    Dernier message: 08/11/2010, 21h34
  3. Geolocalisation sur une image type google map
    Par James_ dans le forum LabVIEW
    Réponses: 3
    Dernier message: 09/02/2010, 10h52
  4. Insérer une image dans une infobulle pour google maps
    Par durthu dans le forum APIs Google
    Réponses: 2
    Dernier message: 13/07/2007, 13h31
  5. déplacement d'une image dans un calque dimensionné précis
    Par mimix0 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/09/2006, 18h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo