1. #1
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    297
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 297
    Points : 46
    Points
    46

    Par défaut Infobulle sur carte de france

    Bonjour,

    J'ai un code JavaScript pour afficher une infobulle au passage de la souris sur ma carte de France qui fonctionne très bien mais j’aimerai lui apporter une modification. Je m'explique lors passage de la souris, l'infobulle et a droite de mon curseur et j'aimerai quelle se trouve sur la gauche du curseur.

    Mon 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
    function svgTip(opts) {
      opts = opts || {};
      opts.fontsize = opts.fontsize || "14px";
      opts.padding  = opts.padding || "12px";
    //  opts.bgcolor  = opts.bgcolor  || "#FFD700"; //"#FFD700"
      opts.color    = opts.color  || "#000000";    //"#000000";  
      opts.opacity  = opts.opacity || 2.6;
     
     
      $.each( $('[title]', 'svg'), function(id, obj) {
        var tt     = $(this).attr("title"),
            that   = $("<div class='svgtip'>" + tt + "</div>");
     
        that.css({'position': "absolute",
                  'top': 0,
                  'left': 0,
                  'display': "none",
                  'backtipground-color': opts.bgcolor,
                  'color': opts.color,
                  'padding': opts.padding,
                  'font-size': opts.fontsize,
                  'opacity': opts.opacity,
                  'pointer-events' : 'none'
                 });
     
        $(this).hover(function(event) {
          that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
          that.addClass("active");
          that.slideDown(100);
        }, function() {
          that.slideUp(100);
          that.removeClass("active");
        });
        $(this).on("mousemove", function(event) {
          if (that.hasClass("active")) {
            that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop() - that.height()});
          }
        });
        $('body').append(that);
      });
    }
     
    //new svgTip({fontsize: "20px", padding:"30px"});
    new svgTip({fontsize: "20px", padding:"50px"});
     
    function lll (msg) { $('#debug').append(msg + "<br/>");}


    Je vous remercie d'avance

    Cordialement

    Max

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 904
    Points : 25 327
    Points
    25 327

    Par défaut

    Bonjour,
    la solution est dans la modification de cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
    il te faut retrancher la largeur de l'élément qui est affiché.

  3. #3
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    297
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 297
    Points : 46
    Points
    46

    Par défaut

    Bonjour NoSmoking

    Je te remercie mais je suis nul en Javascript si j'ai compris ton raisonnement je doit travailler sur ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
          that.slideDown(100);
        }, function() {
          that.slideUp(100);
    Bonne journée

    Max

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 904
    Points : 25 327
    Points
    25 327

    Par défaut

    Non je te parle de récupérer la largeur (width) et de la soustraire à la valeur de left.

  5. #5
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    297
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 297
    Points : 46
    Points
    46

    Par défaut

    Re,

    Non alors je ne sais pas tempi

    Bonne journée et merci encore

    Max

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 904
    Points : 25 327
    Points
    25 327

    Par défaut

    Qu'est ce que tu ne comprends pas !?!

    « récupérer la largeur (width) »
    Voir : .outerWidth()


    « et de la soustraire à la valeur de left »
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        var larg = that.outerWidth();
        var posX = event.clientX - larg;
        that.css({'left': event.clientX, 'top': posX + $(window).scrollTop() - that.height()});
      }
    });

Discussions similaires

  1. Liens <a> sur carte de France
    Par abc.xyz dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 09/11/2015, 12h04
  2. Clic sur Carte de France
    Par myklou dans le forum IHM
    Réponses: 3
    Dernier message: 01/08/2011, 08h47
  3. Création d'une carte de France sur un état
    Par rnicolas.1987 dans le forum IHM
    Réponses: 11
    Dernier message: 15/10/2008, 12h02
  4. Rollover sur une carte de france
    Par AAlain dans le forum Webdesign & Ergonomie
    Réponses: 4
    Dernier message: 19/04/2007, 11h36
  5. Calque -> Un point sur une carte de france
    Par TATAYET dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 02/04/2005, 14h48

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