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][maj] Une info bulle [JavaScript]


Sujet :

Contribuez

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut [SRC][maj] Une info bulle
    Un script pour une info-bulle.
    Une info-bulle

    Auteur : auteur
    Pas de pièce jointe
    Contenu :
    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
    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
     
    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    .clBulle{
    width: 160px;
    display: none;
    position: absolute;
    z-index : 1;
    background-color: #F4F49C;
    padding: 2px;
    margin: 2px;
    border-style: ridge;
    border-width: 3px;
    border-color: #F4F49C;
    font-family: Arial;
    font-size: 8pt;
    }
     
    .mesDiv{
    background-color: #B3C2A1;
    padding: 10px;
    }
    .monStyle1{
    width: 150%;
    height: 60px;
    }
    .monStyle2{
    width: 220px;
    }
     
    //-->
    </style>
     
    <script type="text/javascript">
    <!--
    function MouseOver(ev)
    {
      var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
      var Ybulle;
      var el=document.getElementById("Bulle");
     
      //on affiche la boite de dialogue pour evaluer ses dimensions.
      if (el.style.display!="inline")
          el.style.display="inline";
     
      //hauteur et largeur de la bulle
      htDiv = el.offsetHeight;
      lgDiv = el.offsetWidth;
     
      //delta de la bulle sous la souris
      dY=10;
      dX=10;
     
      //position de la souris :
      Xfen = ev.clientX;
      Xdoc = Xfen + document.body.scrollLeft;
     
      Yfen = ev.clientY;
      Ydoc = Yfen + document.body.scrollTop;
     
      //position de la bulle dans la page :
      if ((Xfen + lgDiv + dX) > document.body.clientWidth)
        el.style.left = document.body.clientWidth + document.body.scrollLeft - lgDiv;
      else
        el.style.left = Xdoc + dX;
     
      if ((Yfen + htDiv + dY) > document.body.clientHeight)
      {
         Ybulle = document.body.clientHeight + document.body.scrollTop - htDiv-5;
         if (parseInt(Ybulle)>parseInt(Ydoc))
         {
           el.style.top = Ybulle;
         }
         else
         {
           el.style.top = Ydoc - htDiv-dY;
         }
      }
      else
      {
         el.style.top = Ydoc + dY-5;
      }
       
      //contenu de la bulle :
      el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
      el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
     
    }
     
    function MouseOut()
    {
     //on cache la bulle
     document.getElementById("Bulle").style.display = "none";
    }
    //-->
    </script>
     
    </head>
     
    <body>
    <div class="clBulle" id="Bulle">Mon info-bulle</div>
     
    <div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()">
    ici l&rsquo;info bulle se d&eacute;place avec la souris lorsque vous survolez ce
    paragraphe... <br>
    Déplacer l&rsquo;ascenseur horizontal et repositionnez la souris sur le paragraphe.
    Lisez Xdoc et Xfen.... ;-)
    </div>
     
    <br><br><br>
     
    <div class="mesDiv monStyle2" onmouseover="MouseOver(event)" onmouseout="MouseOut()">
    par contre ici, l&rsquo;info-bulle appara&icirc;t et reste fixe jusqu&rsquo;&agrave; ce que vous
    sortiez du paragraphe.
    </div>
     
    <br><br><br><br><br><br><br><br>
    <!--
    <br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    -->
    <div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()">
    ici l&rsquo;info bulle se d&eacute;place avec la souris lorsque vous survolez ce
    paragraphe... <br>
    Déplacer l&rsquo;ascenseur horizontal et repositionnez la souris sur le paragraphe.
    Lisez Xdoc et Xfen.... ;-)
    </div>
     
    </body>
     
    </html>
    Remarques :
    ce code fonctionne très bien avec Firefox et IE5.
    Deux possibilités : la bulle suit la souris, ou la bulle reste fixe (cf. exemples).
    Il gère les cas où la souris se trouve à droite de la page, ainsi que le cas où la souris se trouve en bas à droite de la page.

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par trotters213
    Je t'écris au sujet de ton script sur les info-bulles, j'ai décelé des erreurs :
    - sous FF 2 : sur n'importe quel paragraphe que tu passes, en entrant par n'importe quel endroit, le carré avec les coordonées de la souris sont en haut à gauche.

    - sous IE 6 : ça fonctionne mieux mais la gestion des bords ne se fait pas (donc si tu te colles à un bord, tu ne vois plus le carré des coordonnées) et lorsque tu déplaces la fenêtre, le carré ne se mets plus à côté de la souris mais il se décale toujours plus.

    - sous Opera, ... c'est parfait
    Plusieurs remarques :

    • Comme je l'ai dit plus haut j'ai testé ce script avec Firefox1 et IE5. On pourra remarquer également l'absence de doctype dans ce code.
    • J'ai constaté que ce doctype :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      avait une influence sur certains attributs : quelle que soit la position du scroll document.body.scrollLeft et document.body.scrollHeight renvoyaient toujours 0 sous Firefox de même que clientX et clientY.

      Donc pour Firefox il faut utiliser pageX et pageY d'où cette correction :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
       
       Xfen = (ev.pageX)?ev.pageX:ev.clientX;
       Yfen = (ev.pageY)?ev.pageY:ev.clientY;
       
       Xdoc = Xfen + document.body.scrollLeft;
       Ydoc = Yfen + document.body.scrollTop;
      clientX, clientY et scrollLeft, scrollTop on les garde pour IE.

      Mais comme vous le savez une solution amène un nouveau problème : le code ne fonctionne pas avec Opéra
    • gestion des bords sous IE6 : cela peut sans doute s'expliquer par le fait que les tailles des bords ne sont pas comptabilisés dans les dimensions du div et seraient donc logiquement "exclus" du gestionnaire d'événements.



    L'idéal serait de trouver le doctype qui fait que le code fonctionne quel que soit le navigateur. Si vous avez des suggestions...

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Ce script pose vraiment des problèmes aux utilisateurs un exemple ici :
    http://www.developpez.net/forums/sho...d.php?t=260358

    Le positionnement de la bulle (qui est l'intéret du script) est très difficile à déterminer.

    Par conséquent, je me demande si ce script à sa place ici.

    Si vous n'avez pas de suggestions pour améliorer ce script, c'est à dire le rendre compatible avec un maximum de navigateurs, je ferai un délestage de ce sujet.


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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Il existe des scripts d'info-bulle plus efficaces que celui-ci

    ==> Delestage

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher une info bulle (ControlTipText)
    Par milia dans le forum Access
    Réponses: 4
    Dernier message: 17/07/2006, 18h16
  2. Afficher une info bulle dans un composant AWT
    Par Marius_94 dans le forum AWT/Swing
    Réponses: 8
    Dernier message: 13/07/2006, 10h56
  3. Réponses: 2
    Dernier message: 09/05/2006, 11h14
  4. probleme sur une info bulle avec onMouseOver
    Par pouss dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 08/02/2006, 10h40
  5. Mettre une info bulle Tooltiptext sur un rectangle?
    Par danje dans le forum Graphisme
    Réponses: 7
    Dernier message: 21/11/2005, 10h31

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