Forum : problème Tuto Carte interactive

Bonjour,

Je viens de suivre le superbe tuto (comme tout ceux présent sur ce site) sur les cartes interactives.
J'ai donc réussi à obtenir le résultat voulu.
Mais là où j'ai un problème, c'est lorsque je veux intégrer la carte dans mon site.
La tooltip se retrouve décalée en vrac.
Je pense que cela vient du fait que la carte n'est plus positionnée "top left" mais elle positionnée dans une div.
Voici un extrait de mon code pour que vous puissiez m'aider plus facilement :

map.html :

...
<script type="text/javascript">
    jQuery(function($) {
        // ajoute une couche pour la colorisation des régions et créer la bulle
        $('.map').append('<div class="overlay">').append('<div class="tooltip"></div>');

        //masque la bulle
        $('.map .tooltip').hide();

        //définition des régions
        var regions = 
            {name: 'Association de Ablon', slug:'ablon'},
            {name: 'Association de Aunay sur Odon', slug:'aunay'},
            {name: 'Association de Balleroy', slug:'balleroy'}
        ]

        // bulle qui suit la souris
        $(document).mousemove(function(e){
            $('.map .tooltip').css({
                top: e.pageY-$('.map .tooltip').height()-10-$(this).scrollTop(),
                left: e.pageX-$('.map .tooltip').width()/2-10
            });
        });

        // lien sur les régions
        $('.map area').each(function(){
            var index=$(this).index();
            $(this).attr('href','asso.html?asso='+regions[index].slug);
        });

        // passage sur une région
        $('.map area').mouseover(function(){
            var index=$(this).index();
            var left=-index*707-707;
            $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.8);
            $('.map .overlay').css({
                backgroundPosition : left+"px 0px"
            });
        });

        // on sort de la map
        $('.map').mouseout(function(){
            $('.map .overlay').css({
                backgroundPosition : "707px 0px"
            });
            $('.map .tooltip').stop().fadeTo(500,0);
        });
    });

    </script>
</head>
<body>
    <div class="page_map">
.......
                <div class="contenu" style="left: 20px;top: 340px;">
            <div class="map" style="left:75px;">
                <img src="img/carte/fond.png" width="707" height="500" usemap="#Map" />
                <map name="Map">
                    <area shape="poly" coords="561,68,613,48,635,60,640,90,640,107,640,128,608,139,582,116,563,107" href="#">
                    <area shape="poly" coords="200,293,212,284,228,291,256,293,271,299,278,324,281,343,246,349,223,344,196,319" href="#">
                    <area shape="poly" coords="108,221,175,183,193,182,213,191,213,202,207,215,195,220,161,232,140,241,128,240" href="#">
                </map>
            </div>
        </div>
....

Mon map.css :

.map {
    width:707px;
    height:500px;
    background: url(../img/carte/map.png) left top no-repeat;
    position: relative;
}
.map .overlay {
    width:707px;
    height:500px;
    background: url(../img/carte/map.png) 707px top no-repeat;
    position: absolute;
    top:0;
    left:0;
    z-index:1;
}
.map img {
    position: absolute;
    top:0;
    left:0;
    z-index:2;
}
.map .tooltip {
    position: fixed;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
    background: #000;
    padding: 0 10px;
    display: inline;
    top:0;
    left:0;
    z-index: 3;
    text-align: center;
}

Mon style.css (qui contrôle le style de mon site :

.page_map {
    background:#ffffff;
    background-image: url("../img/lettre-top.png"),url("../img/photo-top.png"),url("../img/top.png");
    background-position: 0 0, -100px 0, 0 0;
    background-repeat: no-repeat;
    width: 960px;
    margin:0 auto;
    height:1250px;
}
.contenu {
    color:grey;
    font-family:'Futura';
    position: relative;
    font-size:16px;
    width: 900px;
    box-shadow:
2px 2px 2px 2px rgba(0, 0, 0, 0.5),
2px 2px 2px 2px rgba(255, 255, 255, 0.5) inset; 
    padding: 10px;
}

J'ai vu un commentaire parlant de mon problème dans les com du tuto mais la solution évoquée ne résout pas mon problème.
En espérant que vous puissiez m'aider...

problème Tuto Carte interactive

1 réponse