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 :

[SRC] Simulation d'une sélection


Sujet :

Contribuez

  1. #1
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut [SRC] Simulation d'une sélection
    Simulation d'une sélection

    Auteur : Bisûnûrs.

    FAQ utilisée : Récupérer les coordonnées de la souris

    Script utilisable : A cette adresse

    Description : Vous pouvez créer des cadres dans la zone rouge en déplaçant votre souris à la manière d'une sélection.

    Code source :


    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
    52
    53
    54
    55
    56
    57
    var debX, debY, arrX, arrY, div;
    function debut(e){
       if(parseInt(navigator.appVersion) >=4){
          if(navigator.appName == 'Netscape'){
             debX = e.pageX ;
             debY = e.pageY;
          }
          else{
             debX = event.x ;
             debY = event.y;
          }
       }
       document.getElementById('gnia').onmousemove = function(){encours(e)};
       div = document.createElement('div');
    }
    function encours(e){
       if(parseInt(navigator.appVersion) >=4){
          if(navigator.appName == 'Netscape'){
             arrX = e.pageX ;
             arrY = e.pageY;
          }
          else{
             arrX = event.x ;
             arrY = event.y;
          }
       }
       creation();
    }
    function fin(){
       document.getElementById('gnia').onmousemove = "";
       div.style.backgroundColor = "#ff0";
       div.style.border = "0";
    }
    function creation(){
       div.style.border = "1px dashed #ff0";
        
       if(debX <= arrX){
          div.style.width = arrX-debX+"px";
          div.style.left = debX+"px";
       }
       else{
          div.style.width = debX-arrX+"px";
          div.style.left = arrX+"px";
       }
       if(debY <= arrY){
          div.style.height = arrY-debY+"px";
          div.style.top = debY+"px";
       }
       else{
          div.style.height = debY-arrY+"px";
          div.style.top = arrY+"px";
       }
       div.style.lineHeight = "2px";
       div.style.fontSize = "2px";
       div.style.position = "absolute";
       document.getElementById('gnia').appendChild(div);
    }


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="gnia" onmousedown="debut(event)" onmouseup="fin()"></div>

    Remarques : Fonctionne parfaitement sur IE6, Firefox 1.5 et Opéra 9.02 (quoi que sur ce dernier on ne peut pas débuter de sélection sur un cadre présent).
    Ne fonctionne pas sur Firefox 2 (allez savoir pourquoi).
    Je n'ai pas encore trouvé de cas concret pour lequel ce code a son utilité mais bon.

  2. #2
    Membre expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Points : 3 239
    Points
    3 239
    Par défaut
    Attention, le script ne marche pas tout à fait...
    Si on ouvre une selection, puis qu'on appuie sur le boutton droit, le cadre reste "figé"...
    Il faudrait voir ce qu'il faut changer pour changer ca...

  3. #3
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    De la même manière, si on relâche la bouton de la souris en dehors du cadre et qu'on y revient il ne se rempli pas.

    Je fais des recherches pour l'améliorer, merci pour ta remarque.

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    Comme me l'a fait remarquer DoubleU par MP, pour que ça fonctionne sur Firefox 2 il suffit de remplacer cette ligne :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('gnia').onmousemove = function(){encours(e)};

    par celle-là :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('gnia').onmousemove = encours;

    Aucun problème de compatibilité avec IE6 et FF1.5.

    Merci à lui.

  5. #5
    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 644
    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 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    J'ai le felmem de tester... mais est-ce qu'il dessine en temps réel un tracé en pointillé de la selection ?
    peut il aussi gérer le sens du traçage ??



    j'en avais un pour IE ...

    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
    <HTML> 
    <HEAD> 
     
    <SCRIPT LANGUAGE="JavaScript"><!-- 
    var first=-1
    var x,y,x2,y2,topdiv,leftdiv,blx, bly
     
    function GestionClick() { 
     
    first++;
     
    if(first==0){ 
    			if(parseInt(navigator.appVersion) >=4){
          			if(navigator.appName == 'Netscape'){
             			x=window.event.x; 
              			y=window.event.y;  
          			}
          else{
             x = event.x ;
             y = event.y;
     	     }
     	     }   
     
     
     
    //          x=window.event.x; 
      //        y=window.event.y;  
              topdiv=y;
              leftdiv=x;
              blx=x;
              bly=y;
              affiche();
    first=1;
    } 
     
    if(first==2){
    var sendem=confirm('validez vous la capture ?\n\- Coordonnées du coin en haut à gauche: \('+leftdiv+','+topdiv+'\)\n\- Coordonnées du coin en bas à droite: \('+blx+','+bly+'\)');
    first=-1,topdiv=0,leftdiv=0,blx=0,bly=0;
    affiche();
     
    //ici il ne te reste plus qu'a chopper le top left top+height left+width ....
    }
     
    } 
     
     
    function drawdiv(){
    document.getElementById('dotframe').style.display='none'
    if (first==1){
     
    		switch (true){
    		     case (window.event.x || event.x)< parseInt(document.getElementById('ecran').offsetLeft):
    					x2=parseInt(document.getElementById('ecran').offsetLeft)
    					break;
    				case (window.event.x || event.x)>parseInt(document.getElementById('ecran').offsetLeft)+parseInt(document.getElementById('ecran').offsetWidth):
    					x2=parseInt(document.getElementById('ecran').offsetLeft)+parseInt(document.getElementById('ecran').offsetWidth)
    					break;
    				default:
    				 	x2=(window.event.x||event.x);
    					}	
    		switch (true){
    		     case (window.event.y||event.y)< parseInt(document.getElementById('ecran').offsetTop):
    					y2=parseInt(document.getElementById('ecran').offsetTop)
    					break;
    				case (window.event.y||event.y)>parseInt(document.getElementById('ecran').offsetTop)+parseInt(document.getElementById('ecran').offsetHeight):
    					y2=parseInt(document.getElementById('ecran').offsetTop)+parseInt(document.getElementById('ecran').offsetHeight)
    					break;
    				default:
    				 	y2=(window.event.y||event.y);
    					}	
     
     
              topdiv=(y2<y)?y2:y;
              leftdiv=(x2<x)?x2:x;
              x2=(x2<leftdiv)?x:x2;
              y2=(y2<topdiv)?y:y2;
              blx=(x2<x)?x:x2;
              bly=(y2<y)?y:y2;
     
              affiche();
     
    document.getElementById('dotframe').style.top=topdiv+'px';
    document.getElementById('dotframe').style.left=leftdiv+'px';
    document.getElementById('dotframe').style.height=(bly-topdiv)+'px';
    document.getElementById('dotframe').style.width=(blx-leftdiv)+'px';
    document.getElementById('dotframe').style.display='block';
     
    }
    }
     
     
    function affiche(){
        		document.test.x.value = leftdiv;
              document.test.y.value = topdiv;
              document.test.x2.value = blx;
              document.test.y2.value = bly;
    }
     
    //--></SCRIPT>
     
    </HEAD>
     
    <BODY onclick="GestionClick()" onmousemove="drawdiv()">
     
    <FORM NAME="test">
    <table>
     <tr>
     	<td>X:</td>
     	<td><INPUT TYPE="TEXT" NAME="x" SIZE="4"></td>
     	<td>Y:</td>
     	<td><INPUT TYPE="TEXT" NAME="y" SIZE="4"></td>
     </tr>
     	<td>X2:</td>
     	<td><INPUT TYPE="TEXT" NAME="x2" SIZE="4"></td>
     	<td>Y2:</td>
     	<td><INPUT TYPE="TEXT" NAME="y2" SIZE="4"></td>
     </tr>
    </table>	
    </FORM>
    <div id="ecran" style="position:absolute;top:100px; left:100px">
    <img id="image" src="imagetest.gif" />
    </div>
    <div id="dotframe" style="position:absolute;display:none;height:0px;width:0px;background-color:none;border:1px gray;z-index:2;top:0px;left:0px;border-style:dotted;font-size:0px;"></div>
    </BODY>
    </HTML>

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    Citation Envoyé par SpaceFrog
    J'ai le felmem de tester... mais est-ce qu'il dessine en temps réel un tracé en pointillé de la selection ?
    peut il aussi gérer le sens du traçage ??
    Oui et oui. =)

  7. #7
    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 644
    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 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    Quand j'aurais un peu de temps de crossbrowseriserait mon code ...

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 653
    Points : 11 147
    Points
    11 147
    Par défaut
    Citation Envoyé par Bisûnûrs
    Comme me l'a fait remarquer DoubleU par MP, pour que ça fonctionne sur Firefox 2 il suffit de remplacer cette ligne :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('gnia').onmousemove = function(){encours(e)};

    par celle-là :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('gnia').onmousemove = encours;
    Affecter de manière dynamique à un événement, une fonction....
    La seconde syntaxe qui me laisse vraiment perplexe car je ne comprends absolument pas comment les paramètres de la fonction (ici event) sont transmis...
    Comment le navigateur "sait" que la variable e correspond à l'objet event ??

  9. #9
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    Citation Envoyé par Auteur
    Affecter de manière dynamique à un événement, une fonction....
    La seconde syntaxe qui me laisse vraiment perplexe car je ne comprends absolument pas comment les paramètres de la fonction (ici event) sont transmis...
    Comment le navigateur "sait" que la variable e correspond à l'objet event ??
    Je suppose qu'il doit se débrouiller.
    Je l'ai testé sur IE6 et FF1.5, je n'ai pas pu le tester sur FF2, mais je n'ai pas vu de problème d'exécution ...

  10. #10
    Membre expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Points : 3 239
    Points
    3 239
    Par défaut
    Citation Envoyé par Bisûnûrs
    Je suppose qu'il doit se débrouiller.
    Je l'ai testé sur IE6 et FF1.5, je n'ai pas pu le tester sur FF2, mais je n'ai pas vu de problème d'exécution ...
    Mais c'est toi qui le lui dit !!!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function fnc1(e) {
       // ...
    }
    ET
    FAIT
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    x.onmousemove=function fnc1(e) {
       // ...
    }
    Ensuite, FF fait ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.onmousemove(eventArgs);

  11. #11
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 653
    Points : 11 147
    Points
    11 147
    Par défaut
    euh....

    Si par exemple, j'ai dans mon code HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div id="monDiv" onmousemove="move(event, this, 'coucou')">
    bla bla bla bla bla bla bla bla bla bla 
    </div>
    avec move une fonction quelconque qui prend comme paramètre l'objet event, l'objet appelant (this) et une chaine de caractères.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function move(e, objet, str)
    {
    ....
    }
    Maintenant si j'ai :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div id="monDiv">
    bla bla bla bla bla bla bla bla bla bla 
    </div>
    quel serait le code JS qui me permettrait d'affecter à onmousemove la fonction move ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    document.getElementById("monDiv").onmousemove= ???
    Et comment le navigateur gère l'ensemble ?

  12. #12
    Membre expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Points : 3 239
    Points
    3 239
    Par défaut
    FF fait HTMLObjectInstance.onmousemove(eventArgs);
    IE fait HTMLObjectInstance.onmousemove(); (event est une variable globale dans window)

    Donc dans ton cas il faut passer par une fonction "relais" qui complète les events

    Voici le code sous-entendu par FireFox :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function (event) { move(event, this, "coucou"); }
    Et celui par IE :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function () { move(event, this, "coucou"); }
    Pour un code compatible on préférera en général :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function (event) {
      event = (event?event:window.event); // POUR IE
      move(event, this, "coucou"); 
    }
    A noter qu'il est aussi possible de faire comme ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
     
    function move(event) {
     if (!event) { event = window.event; }
     var objet = this;
     var str = this.onmousemoveArguments[0];
     //...
    }
     
    var o = document.getElementById("id");
    o.onmousemove = move;
    o.onmousemoveArguments=["coucou"];

Discussions similaires

  1. Faire une sélection sur une image?
    Par sybilla dans le forum MFC
    Réponses: 3
    Dernier message: 29/08/2005, 14h34
  2. Récupérer une sélection
    Par Poussera dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 13/04/2005, 12h16
  3. Besoin d'un conseil pour une sélection Access/fichier
    Par Oluha dans le forum Bases de données
    Réponses: 1
    Dernier message: 20/03/2005, 20h10
  4. Redirection automatique lors d'une sélection dans un Select
    Par MiJack dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 21/12/2004, 19h09
  5. Fonction de zoom à partir d'une sélection souris
    Par mick74 dans le forum OpenGL
    Réponses: 2
    Dernier message: 13/08/2004, 22h41

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