1. #1
    Nouveau membre du Club
    Inscrit en
    septembre 2008
    Messages
    209
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 209
    Points : 36
    Points
    36

    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 518
    Points : 24 404
    Points
    24 404

    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
    Nouveau membre du Club
    Inscrit en
    septembre 2008
    Messages
    209
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 209
    Points : 36
    Points
    36

    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 518
    Points : 24 404
    Points
    24 404

    Par défaut

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

  5. #5
    Nouveau membre du Club
    Inscrit en
    septembre 2008
    Messages
    209
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 209
    Points : 36
    Points
    36

    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 518
    Points : 24 404
    Points
    24 404

    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