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

JavaScript Discussion :

Déplacer une image en JS vers un point cliqué


Sujet :

JavaScript

  1. #1
    Membre du Club

    Homme Profil pro
    Chargé de projet
    Inscrit en
    Juillet 2013
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : Chargé de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2013
    Messages : 14
    Points : 44
    Points
    44
    Billets dans le blog
    1
    Par défaut Déplacer une image en JS vers un point cliqué
    Bonjour à tous,

    J'ai besoin d'aide pour faire bouger une petite image de façon rectiligne sur une carte quand on clique sur un bouton.

    J'ai assemblé du code JS (je ne suis pas très bon en JS) pour afficher une grande image dans un navigateur (sur laquelle on peut zoomer avec la molette de la souris et faire du cliquer-glisser) et un ensemble de points suivant une liste dans un fichier JS à part. C'est une interface graphique pour un jeu, une carte sur laquelle on peut aller visiter des lieux.

    Vous pouvez avoir un aperçu de que cela fait sur le prototype suivant.
    http://terre-impossible.com/gestion-partie/monde.php

    Pour l'instant tout est fixe et on peut voir une série de points verts qui désigne les lieux où l'on peut aller. Il y a aussi une image qui pointe sur le même lieu qu'un des points verts, représentant la position du joueur.
    Ce point est le premier de la liste qui est lu pour créer tous les points sur la carte. Ce n'est là que pour l'exemple.

    Voici le code JS pour créer l'affichage de la carte et les points qu'il y a dessus. Bien sûr, il y a un page HTML qui appelle le JS.

    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
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    var nom_lieu;
    		var description;
    		var action;
    		var posijoueurgauche=1383;
    		var posijoueurhaut=824;
     
       function zoomi(config){
     
            this.val=config.taille_image_debut;
            this.lf=config.largeur_image;
            this.rf=config.hauteur_image;
            this.obj=config.nom_objet;
    		this.min=config.taille_mini;
    		this.max=config.taille_maxi;
    		this.marker_h=config.marker_hauteur;
    		this.marker_l=config.marker_largeur;
    		this.taille_marker=config.taille_marker;
    		this.vitesse_zoom=config.vitesse_zoom;
    		this.elem=document.createElement("div");
    		this.elem.className="divim";
    		document.getElementById(config.div_conteneur).appendChild(this.elem);
     
            var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
     
            this.elem.addEventListener(elmouse,this.dirizoom.bind(this),false);
     
            this.elem.onmousedown=drg.deplacer.bind(this);
     
    		this.elem.style.backgroundImage="url('"+config.chemin_image+config.image_de_fond+"')";
    		this.elem.style.height=config.hauteur_image*this.val+"px";
    		this.elem.style.width=config.largeur_image*this.val+"px";
    		this.elem.style.left=(this.elem.parentNode.clientWidth/2)-(this.elem.offsetWidth/2)+"px";
    		this.elem.style.top=(this.elem.parentNode.clientHeight/2)-(this.elem.offsetHeight/2)+"px";
     
            var largeur=1/this.lf;
            var hauteur=1/this.rf;
     
    		function joueur() {
    			var jj=document.createElement("div");
    			jj.setAttribute("class","ptj");
    			jj.style.top=posijoueurhaut+"px";
    			jj.style.left=posijoueurgauche+"px";
    			jj.style.height="150px";
    			jj.style.width="150px";
    			jj.style.background='url("../images/cartes/position-player.png")';
    		}
     
            for (var i = 0; i< obj_point.length; i++){
    			//parcourt le tableau venant du fichier donne_plot.js pour créer les div d'affichage des points cliquables.
                var pt=document.createElement("div");
                pt.setAttribute("class","pt1");
                pt.setAttribute('rel',i); //numérote les points cliquables.
     
                pt.onmousemove=this.trap.bind(this);
                pt.onmouseout=function(){this.suivi.style.display='none';}.bind(this);
                pt.onclick=this.action.bind(this);
    			pt.style.height=this.marker_h+"px";
    			pt.style.width=this.marker_l+"px";
    			pt.style.backgroundImage='url("'+config.chemin_image+obj_point[i].image+'")';
     
                obj_point[i].elem=this.elem.appendChild(pt);
    			//potision des points.
                obj_point[i].posi_pt_l=obj_point[i].gauche*largeur;
                obj_point[i].posi_pt_t=obj_point[i].haut*hauteur;
     
    			this.posi_point(i);
            }
     
    		joueur();
     
            var vid=document.createElement('div');
            vid.className="bulle";
            var spa=document.createElement('span');
            vid.appendChild(spa);
            this.suivi=document.body.appendChild(vid);
     
    		}
     
        zoomi.prototype.dirizoom=function(e){
     
            e.preventDefault();
     
            var delta = e.wheelDelta ? e.wheelDelta/120 : -e.detail/3;
     
            this.val= delta< 0 ? this.val-this.vitesse_zoom : this.val+this.vitesse_zoom;
     
    		if(this.val<=this.min){
    			this.val+=this.vitesse_zoom;
    			return false;
    		}
     
    		if(this.val>=this.max){
    			this.val-=this.vitesse_zoom;
    			return false;
    		}
     
            var elem=this.elem;
     
            var position = elem.getBoundingClientRect();
     
            var largeur=1/position.width;
            var hauteur=1/position.height;
     
            var distance_g=e.clientX-position.left;
            var distance_h=e.clientY-position.top;
     
            var pourcent_l=largeur*distance_g;
            var pourcent_h=hauteur*distance_h;
     
            elem.style.width=(this.lf*this.val)+'px';
            elem.style.height=(this.rf*this.val)+'px';
     
            elem.style.left=distance_g-(elem.offsetWidth*pourcent_l)-(elem.parentNode.offsetLeft-position.left)+'px';
            elem.style.top=distance_h-(elem.offsetHeight*pourcent_h)-(elem.parentNode.offsetTop-position.top)+'px';
     
    		for (var i = 0; i< this.obj.length; i++){
    			this.posi_point(i);
    		}
    	}
     
     
    		zoomi.prototype.posi_point=function(i){
     
     
     
    			if(this.taille_marker){
     
    				this.obj[i].elem.style.left=this.obj[i].posi_pt_l*(this.lf*this.val)+'px';
    				this.obj[i].elem.style.top=this.obj[i].posi_pt_t*(this.rf*this.val)+'px';
     
    				this.obj[i].elem.style.height=this.marker_h*this.val+"px";
    				this.obj[i].elem.style.width=this.marker_l*this.val+"px";
    				this.obj[i].elem.style.borderRadius=(this.marker_h*this.val)/2+"px";
    			}
     
    			else{
    				var w=((this.marker_l*this.val)-this.marker_l)/2;
    				var h=((this.marker_h*this.val)-this.marker_h)/2;
     
    				this.obj[i].elem.style.left=(this.obj[i].posi_pt_l*(this.lf*this.val))+w+'px';
    				this.obj[i].elem.style.top=(this.obj[i].posi_pt_t*(this.rf*this.val))+h+'px';
     
    			}
     
        }
     
        zoomi.prototype.trap=function(evt){
    		//fonction pour afficher les info-bulles quand on survol un point.
            evt =(!evt) ? window.event : evt;
     
            var el=typeof window.addEventListener == 'undefined' ? event.srcElement : evt.currentTarget;
     
            var XX =evt.pageX;
            var YY =evt.pageY;
     
            this.suivi.style.top=YY-20+'px';
            this.suivi.style.left=XX+20+'px';
     
            var chiffre=parseInt(el.getAttribute('rel'));
     
            this.suivi.getElementsByTagName("span")[0].textContent=obj_point[chiffre].txt;
     
            this.suivi.style.display='block';
     
        }
     
     
     
        zoomi.prototype.action=function(evt){
    		//fonction quand on clique sur un point.
            //alert(evt.currentTarget.getAttribute("rel"));
     
    		text = 'monde' + evt.currentTarget.getAttribute("rel") + '.php';
    		pointcliquer = evt.currentTarget.getAttribute("rel");
     
    		$.ajax({
                    url: "requete1.php",
                    method: "GET",//ou POST / OPTION / DELETE / PUT
                    async : false,
                    data: { pointcliquer : pointcliquer},
                    dataType: "json",
    				success : function( response,statut ) {
                          nom_lieu  = response.pointcliquer;
    		},
                    error : function(resultat, statut, erreur){
                        console.log('resultat : ', resultat);
                            console.log('statut : ', statut);
                            console.log('erreur : ', erreur);
                    }
            });
    		$.ajax({
                    url: "requete2.php",
                    method: "GET",//ou POST / OPTION / DELETE / PUT
                    async : false,
                    data: { pointcliquer : pointcliquer},
                    dataType: "json",
    				success : function( response,statut ) {
                          description  = response.pointcliquer;
    		},
                    error : function(resultat, statut, erreur){
                        console.log('resultat : ', resultat);
                            console.log('statut : ', statut);
                            console.log('erreur : ', erreur);
                    }
            });
    		$.ajax({
                    url: "requete3.php",
                    method: "GET",//ou POST / OPTION / DELETE / PUT
                    async : false,
                    data: { pointcliquer : pointcliquer},
                    dataType: "json",
    				success : function( response,statut ) {
                          action  = response.pointcliquer;
    		},
                    error : function(resultat, statut, erreur){
                        console.log('resultat : ', resultat);
                            console.log('statut : ', statut);
                            console.log('erreur : ', erreur);
                    }
            });
            //console.log('nom_lieu',nom_lieu );
            //alert('Test réussi !  ===> ' + nom_lieu );
    		document.getElementById("nom-lieu").innerHTML = nom_lieu;
     
            //console.log('description',description );
            //alert('Test réussi !  ===> ' + description );
    		document.getElementById("bloc-description").innerHTML = description;
     
    		document.getElementById("bloc-img").innerHTML ="<img src='../images/imageville/monde"+pointcliquer+".jpg'>";
     
    		//console.log('action',action );
            //alert('Test réussi !  ===> ' + action );	
    		document.getElementById("action1").innerHTML = action;
     
    		function changerpage() {
    			window.location.replace(text);
    		}
     
    		document.getElementById('action1').onclick=changerpage
     
    		//window.location.replace(text);
        }
     
        var drg={
     
            rar:true,
            decx:0,
            decy:0,
            elem:"",
     
            deplacer:function (e){
     
                if(drg.rar && e.type=="mousedown"){
     
                    e.preventDefault();
                    drg.elem= e.currentTarget;
     
                    drg.decx=e.pageX - drg.elem.offsetLeft;
                    drg.decy=e.pageY - drg.elem.offsetTop;
     
                    document.documentElement.addEventListener("mousemove", drg.posi, false);
                    drg.elem.addEventListener("mouseup", drg.deplacer, false);
                    drg.rar=false;
                    drg.elem.style.cursor="move";
                }
     
                if(drg.rar==false && e.type=="mouseup"){
     
                    document.documentElement.removeEventListener("mousemove", drg.posi, false);
                    drg.elem.removeEventListener("mouseup", drg.deplacer, false);
                    drg.rar=true;
                    drg.elem.style.cursor="zoom-in";	
                }
            },
     
            posi:function(e){
     
                drg.elem.style.left=(e.pageX-drg.decx-drg.elem.parentNode.offsetLeft)+"px";
                drg.elem.style.top=(e.pageY-drg.decy-drg.elem.parentNode.offsetTop)+"px";
            }
        }
     
        addEventListener('load',function(){
     
            var config={
     
                div_conteneur:'conte',		//nom du div conteneur
    			image_de_fond:"mondeV11.jpg",	// nom de l'image de fond
    			chemin_image:"../images/cartes/",		// chemin pour l'image de fond et les plots
                largeur_image:4000,			// largeur originale de l'image
                hauteur_image:2000,			// hauteur originale de l'image
    			taille_image_debut:0.5,		//taille de l'image au chargement de la page
                nom_objet:obj_point,		// nom de l'objet contenant les marqueurs
    			taille_mini:0.4,			// largeur maximale de l'image
    			taille_maxi:1.3,				// largeur minimale de l'image
    			vitesse_zoom:0.1,			// pour regler le zomm plus l'image est grande moins cette valeur est grande
    			marker_hauteur:30,			//largeur des marqueurs
    			marker_largeur:30,			//hauteur des marqueurs
    			taille_marker:false			// talle des marqueurs fixe(false) ou adapté au zoom(true)
            }
     
            new zoomi(config);
     
        },
        false);
    Dans ce code, l'affichage de la position du joueur est toujours le premier point de la liste des points à afficher sur la carte. Je dois le supprimer.
    Il y a aussi dans ce code un peu d'Ajax pour que quand on clique sur un des points verts de la carte, cela mette à jour le menu en bas à droite en allant chercher ses informations dans une base de données.

    Aujourd'hui quand on clique sur un point vert, cela met à jour le menu et permet après en cliquant sur le bouton "Aller à ..." de charger une autre page. La modification que je voudrais apporter et que quand on clique sur le bouton "Aller à ....", cela déplacerait l'image qui donne la position du joueur sur la carte pour aller se placer sur la position du dernier point vert que l'on a cliqué. Et après il faudra cliquer sur le même bouton qui sera devenu "Entré dans ..." pour charger une autre page.

    Donc il faut récupérer les coordonnées du point cliquer pour les appliquer à l'image qui indique la position du joueur au moment où l'on clique sur le bouton du menu.

    Au début, je pensais mettre des variables sur la position du premier point dans le ficher de la liste de ces points. Mais cela ne marche pas.
    Puis je me suis dit que créer une div supplémentaire à travers une fonction serait bien, mais je n'arrive pas à que cela fonctionne. Le point ne s'affiche pas. Déjà et de plus ne sais pas du tout comment faire pour qu'après l'image afficher, glisse de sa position actuelle à la position suivante quand on clique sur le bouton "Aller à".

    Tous les posts que j'ai pu lire sur le déplacement d'image en JS n'étaient pas adaptés à mon problème.

    Merci à ceux qui pourront s'intéresser au problème.

  2. #2
    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


    Je vous conseille de lire et de tester les codes de la totalité de ce tutoriel : https://msdn.microsoft.com/fr-fr/lib...(v=vs.85).aspx

    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.)

  3. #3
    Membre chevronné
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Points : 1 975
    Points
    1 975
    Par défaut
    Voici un exemple de déplacement d'un carré rouge que l'on déplace à l'endroit où l'on a cliqué auparavant sur le document. Le déplacement s'effectue une fois que l'on clique sur le bouton...

    Code HTML : 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
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>deposer en un point donné</title>
    </head>
     
    <body >
    <canvas id ="cancan"></canvas>
    <input type="button" id="bout"></button>
    <script>
        var w=window.innerWidth,h=window.innerHeight;
        var x,y;
        
        var canvas=document.getElementById("cancan");
        canvas.width=canvas.height=w/20;
        canvas.style.position="absolute";
        canvas.style.left=w/10 +"px";
        canvas.style.top=h/10+"px";
        
        var bouton=document.getElementById("bout");
        bouton.style.width=w/10+"px";
        bouton.style.height=w/40+"px";
        bouton.style.position="absolute";
        bouton.style.left=4*w/5+"px";
        bouton.style.top=h/10+"px";
        bouton.value="deplacer";
        bouton.addEventListener('click',doClick);
       
        
        var canvasCtx=canvas.getContext('2d');   
        canvasCtx.fillStyle = "#FF0000";
        canvasCtx.fillRect(0,0,w/20,w/20);
        
        document.addEventListener('mousedown',doMousedown);
        
        function doMousedown(event){
          x = event.clientX;
          y = event.clientY;
          document.removeEventListener('mousedown', doMousedown); 
        }
        
        function doClick(){
           canvas.style.left=x-canvas.width/2+"px";
           canvas.style.top=y-canvas.height/2+"px";
           document.addEventListener('mousedown',doMousedown);
        }
    </script>
    </body>
    </html>

    Si tu veux des explications, tu me le demandes...

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    163
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 163
    Points : 93
    Points
    93
    Par défaut
    Si c'est pour une page web basique alors je te conseille de faire plutôt un onclick qui définit directement les coordonnées sur l'élément image. Si tu veut un effet de transition il faut bien sur définir cette effet via transition dans la feuille de style de cette objet à animer

Discussions similaires

  1. [Débutant] Comment déplacer une image d'une PictureBox vers une autre?
    Par bastou04 dans le forum Visual Studio
    Réponses: 5
    Dernier message: 03/07/2017, 18h27
  2. Réponses: 0
    Dernier message: 01/08/2013, 14h32
  3. Déplacer une image d'une feuille vers une autre dans un fichier Excel
    Par helenaide dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 03/10/2011, 15h27
  4. Réponses: 3
    Dernier message: 11/06/2009, 10h44

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