Obtenir la position de la zone de carte(html)?

Est-ce possible? J'essaie de trouver les coordonnées x et y de l'élément en relation avec le navigateur.

var position = $(this).position();
    x = position.left;
    y = position.right;

Ne fonctionne pas.

Est-il possible de faire cela?

http://adamsaewitz.com/housing/
mettez en surbrillance la chambre bleue 070

OriginalL'auteur switz | 2010-12-25

  1. 4

    Modifier pour la mise à jour question: Depuis que vous utilisez <area> c'est une autre histoire, et l'extraction à partir de la coords attribut est beaucoup plus facile, comme ceci:

    var position = $(this).attr('coords').split(',');
x = +position[0] - 50;
y = +position[1] - 170;

    Les décalages sont juste pour tenir compte de la codées en dur largeur/hauteur de l'info-bulle elle-même. En outre, vous souhaitez utiliser top et left plutôt que margin-top et margin-left. Aussi pour tenir compte de la #content <div>'s position dans la page, donnez-lui un relative position pour l'info-bulle pour s'asseoir, comme ceci:

    #content { position: relative; }

    Alors...au lieu de .après(), utilisez .append() donc il est ajouté à l'intérieur de que parent.

    Vous pouvez tester le résultat ici.

    Pour la question d'origine:

    L'objet .position() retourne a top et left propriétés...mais vous voulez .offset() ici de toute façon (c'est par rapport à la document, où .position() est par rapport à la décalage parent), il devrait donc ressembler à ceci:

    var position = $(this).offset(),
    x = position.left,
    y = position.top; //not right!

    Ou ceci:

    var position = $(this).offset();
var x = position.left;
var y = position.top;

    ...mais sans un seul var séparées par des virgules déclaration, ou une var sur chaque ligne, vous êtes également en train de créer (ou d'essayer de) variables globales, qui va se faire sauter dans IE.

    Étrange de l'opérateur virgule.
    Haha, wow c'est un signe qu'il est en retard. Mais cela ne fonctionne toujours pas, désolé.
    ce qui ne fonctionne pas? Remarque vous voulez .offset() pas .position(), qui est relatif à la parent, pas la document.
    Je suis à l'aide d'opérateurs globaux. Les instances sont créées plus tôt.
    Cela devrait fonctionner comme vous le souhaitez .. jsfiddle.net/YnPsb/5 Vous avez besoin pour obtenir les infos de la coords, mais en même temps, ajuster l'image (ils pointent vers) offset. En outre, vous devez ajuster en fonction de la largeur ou de la hauteur de la boîte d'informations ainsi que la largeur de la zone.

    OriginalL'auteur Nick Craver

  2. 7

    Le problème réside dans le fait que vous avez accès au haut/gauche de la zone de l'élément.

    La zone de l'élément n'est pas placé à l'endroit où son coords dire. C'est géré en coulisses par les dom/navigateur.

    Si vous avez besoin de trouver l'image que l' area concerne et de saisir son décalage.

    var imgId = $(this).closest('map').attr('name');
var imgPos = $('#' + imgId).offset();

    Ensuite, vous prenez la coords attribut de la area et le diviser pour obtenir left/top/width et utilisez-les pour déterminer l'emplacement à l'intérieur de l'image.

    var coords = $(this).attr('coords').split(',');
var box = {
            left: parseInt(coords[0],10),
            top: parseInt(coords[1],10),
            width:  parseInt(coords[2],10)-parseInt(coords[0],10),
            height:  parseInt(coords[3],10)-parseInt(coords[1],10)
            };

    Prendre en considération la largeur/hauteur de la fenêtre d'information qui s'affiche (et puisque vous l'animer, prendre en considération aussi bien) et vous obtenez de 

    x = imgPos.left + box.left + box.width/2 - 65; //65 is the info width/2
y = imgPos.top + box.top -20 -160 -1; //20 is the animation, 160 is the info height, 1 is a safe distance from the top

    démo: http://www.jsfiddle.net/XBjwN/

    Il n'est pas nécessaire pour les frais généraux ici, il suffit de donner le parent d'un relative position prend soin de l'offset dans une beaucoup plus propre, voir les commentaires sur ma réponse pour les liens vers les démos de ce.
    Bon point @Nick. Dans le cas présent, la relative #content en effet de résoudre le problème. Mais si il y a un autre contenu à l'intérieur de la #content (et le nom l'indique il y a peut-être) et avant l'image, il ne serait pas. En va de même pour la carte de l'objet à être défini quelque part d'autre..
    vrai, des préoccupations légitimes, mais je préfère le toujours aller pour le relative option, si un <div class="areaWrapper"> est nécessaire autour de chaque puis-je encore trouver un beaucoup plus propres et plus polyvalent approche, que vous avez un uniforme .closest() accessibles parent pour mettre vos éléments en tant que bien.
    d'accord! Il est plus propre à votre façon. (le map utilisé dans le .closest(), cependant, est obligatoire pour les éléments de la zone)

    OriginalL'auteur Gabriele Petrioli

  3. 0
    $(document).ready(function () {
            $('map').imageMapResize();
            $('area').hover(function () {
                $('.imgpopover').css({ "display": "block", "top": $(this).attr("coords").split(',')[1]+"px", "left": $(this).attr("coords").split(',')[0]+"px" })
                $('.imgpopover label').text($(this).attr("title"))
            }, )
        });

    OriginalL'auteur Jomin George Paul