Pop up ajax pour localiser des lieu sur une carte

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par misscasa2009, 9 Mars 2010.

  1. misscasa2009
    misscasa2009 Nouveau WRInaute
    Inscrit:
    11 Février 2009
    Messages:
    39
    J'aime reçus:
    0
    bonjour à tous ,
    j'ai une image carte, et je voudrai faire des popup en ajax sur certaines zone de la carte,
    quelqu'un aurait il une idée sur le comment procéder, et ci vous avez des liens

    merci bcp
     
  2. Matthieu_s
    Matthieu_s WRInaute discret
    Inscrit:
    3 Août 2006
    Messages:
    84
    J'aime reçus:
    0
    Je n'ai pas compris si tu souhaites placer des points sur la carte ou si tu veux afficher uniquement une partie de la carte

    1/ Si tu souhaites placer des points

    Je suppose que tu connais les coordonnées Y et X du point que tu veux faire figurer sur la carte. Si c'est bien le cas, il te suffit de charger l'image de ta carte dans le popup, par exemple avec un positionnement absolute (pour aller au plus simple), et de places tes points dans la page avec positionnement absolute aussi, un z-index 2 (pour qu'il se place au dessus de l'image) et left et top respectivement égaux à X et Y.

    Je l'avais fait sur un site, ça passe nickel.

    2/ Si tu souhaites n'afficher qu'une partie de la carte

    Dans ce cas je suppose que tu connais les coordonnées X et Y du coin supérieur gauche à partir duquel tu veux afficher la carte ?
    Pour n'afficher qu'une partie de la carte, tu la places en background d'un élément HTML (par exemple le body si tu n'affiches que cela), et tu joues sur le background-position (par exemple background-position:-100px -100px; si tu veux afficher l'image à partir du point 100/100)
     
  3. forty
    forty WRInaute passionné
    Inscrit:
    30 Octobre 2008
    Messages:
    1 901
    J'aime reçus:
    0
    si tu veux pouvoir définir des zones cliquables, tu peux simplement le faire avec les balises html <map> et <area>
     
  4. misscasa2009
    misscasa2009 Nouveau WRInaute
    Inscrit:
    11 Février 2009
    Messages:
    39
    J'aime reçus:
    0
    Merci Matt, ce que je veux c placer des points et au survol de la souris je veux afficher des popup en ajax, j'ai bien compris ta démarche, mais pour la réaliser c un peu difficile, tu n'aurais pas un petit bout de code pour commencer ?

    Merci encore pour ta réponse
     
  5. Ukri
    Ukri Nouveau WRInaute
    Inscrit:
    6 Septembre 2009
    Messages:
    22
    J'aime reçus:
    0
    Code:
    <img src="image.jpg" border="0" usemap="#Map"> 
            <map name="Map">
              <area shape="circle" coords="112,162,29" onMouseOver="OuvrePopup('Zone1')" onMouseOut="FermePopup('Zone1')">
            </map>
    
    Les fonctions OuvrePopup et FermePopup appellent tes fonctions AJAX bien entendu...
     
  6. misscasa2009
    misscasa2009 Nouveau WRInaute
    Inscrit:
    11 Février 2009
    Messages:
    39
    J'aime reçus:
    0
    merci Ukri pour ta réponse, pour la fonction AJAX, j'ai trouvé celle là:
    Code:
       $(function () {
            $('.bubbleInfo').each(function () {
                var distance = 10;
                var time = 250;
                var hideDelay = 500;
    
                var hideDelayTimer = null;
    
                var beingShown = false;
                var shown = false;
                var trigger = $('.trigger', this);
                var info = $('.popup', this).css('opacity', 0);
    
    
                $([trigger.get(0), info.get(0)]).mouseover(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    if (beingShown || shown) {
                        // don't trigger the animation again
                        return;
                    } else {
                        // reset position of info box
                        beingShown = true;
    
                        info.css({
                            top: -90,
                            left: -33,
                            display: 'block'
                        }).animate({
                            top: '-=' + distance + 'px',
                            opacity: 1
                        }, time, 'swing', function() {
                            beingShown = false;
                            shown = true;
                        });
                    }
    
                    return false;
                }).mouseout(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    hideDelayTimer = setTimeout(function () {
                        hideDelayTimer = null;
                        info.animate({
                            top: '-=' + distance + 'px',
                            opacity: 0
                        }, time, 'swing', function () {
                            shown = false;
                            info.css('display', 'none');
                        });
    
                    }, hideDelay);
    
                    return false;
                });
            });
        });
    elle marche pour un seul point, comment je peux faire pour la paramétrer pour toutes les points?
     
Chargement...
Similar Threads - Pop ajax localiser Forum Date
Ajax Popup Multiple Développement d'un site Web ou d'une appli mobile 25 Mars 2011
Script calendrier/gestion evenement - pop up, ajax, php Développement d'un site Web ou d'une appli mobile 14 Mars 2008
Script pop-in en ajax Développement d'un site Web ou d'une appli mobile 21 Février 2008
Problème Ajax et popup Développement d'un site Web ou d'une appli mobile 1 Mai 2007
contenu populaire et mots clés Débuter en référencement 18 Octobre 2021
Pop up javascript + cookie Développement d'un site Web ou d'une appli mobile 3 Février 2021
Annonces bloqués systématiquement sur les articles populaires AdSense 5 Juillet 2020
Styliser popup alert javascript Développement d'un site Web ou d'une appli mobile 16 Mars 2020
Coût par mille des pages populaires inférieure à la moyenne du site AdSense 23 Décembre 2019
Trop de Pop-up, tue le site internet Le café de WebRankInfo 2 Novembre 2019
Chrome 70 : Certains sites très populaires seront bloqués Google : l'entreprise, les sites web, les services 11 Octobre 2018
diminution indice de popularité ? Netlinking, backlinks, liens et redirections 10 Juillet 2018
Themes (populaires) des CMS (Wordpress, Prestashop. ) et duplicate content Débuter en référencement 3 Août 2017
Fancy box : texte caché et pop up au click Débuter en référencement 4 Mai 2017
Organisation de contenu / dilution de popularité Rédaction web et référencement 3 Mai 2016
pop up facebook Demandes d'avis et de conseils sur vos sites 21 Avril 2016
Tracker des clics dans une Pop-in Google Analytics 21 Septembre 2015
Pop up newsletter et incidence référencement Crawl et indexation Google, sitemaps 20 Juin 2015
Limite de la prise en compte des onglets et autres pop-up dans une fiche produit Demandes d'avis et de conseils sur vos sites 23 Janvier 2015
Référencement pop up Débuter en référencement 18 Janvier 2015