Problème avec la barre de défilement avec le tutorie carte dynamique

Mayzz
Javascript

Bonjour j'essaye d'apprendre le JavaScript donc je me suis mis au tutoriel de la carte dynamique.

Mais voilà je rencontre deux problèmes le premier est qu'en reprenant le code tel que je le vois l'animation ne se réalise pas sur firefox internet explorer j'ai dû ajouter à mon code pour la partie .map area =>

$('.map area').mouseover(function(){
console.log('test');

Voici mon code JavaScript quelqu'un pourrait-il me dire où je me suis trompée 

// JavaScript Document
jQuery(function($){
    $('.map').append('<div class="overlay">').append('<div class="tooltip">Sélectionné la région dont vous dépendez</div>');
    $('.map .tooltip').hide();
    var regions = 
    {name : '<strong>Belgique et Luxembourg</strong> <br/> Histoire'},
    {name : '<strong>Nord de la France</strong> <br/> Histoire'},
    {name : '<strong>Ouest de la France</strong> <br/>Histoire'},
    {name : '<strong>Est de la France</strong> <br/>Histoire'},
    {name : '<strong>Sud de la France</strong> <br/>Histoire'},
    {name : '<strong>Sud de la France</strong> <br/>Histoire'},
    {name : '<strong>Internationnal</strong><br/> Histoire'},
    {name : '<strong>Internationnal</strong><br/> Histoire'},
    {name : '<strong>Internationnal</strong><br/> Histoire'},
    {name : '<strong>Internationnal</strong><br/> Histoire'},
    {name : '<strong>Internationnal</strong><br/> Histoire'},
    ];
    //tooltip qui suit la souris
    $(document).mousemove(function(e){
        $('.map .tooltip').css({
        top:e.pageY-$('.map .tooltip').height()-20,
        left:e.pageX-$('.map .tooltip').width()/2-10,
        });
    });
    $('.map area').mouseover(function(){
        console.log('test');
        var index=$(this).index();
        var left=-index*500-500;
        $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.8);
        $('.map .overlay').css({
            backgroundPosition:left+"px 0px"
        }); 
    });

    $('.map').mouseout(function(){
    $('.map .overlay').css({
            backgroundPosition:"500px 0px"
    }); 
    $('.map .tooltip').stop().fadeTo(500,0);
    }); 
});

Mon second problème est d'ordre technique j'ai bien suivie le tutoriel complètement et une fois qu'on le place dans une div PA l'infobulle crée se décale de ma souris par rapport au déplacement de la barre de défilement.

Ex. si on a descendu la barre de défilement en bas de page on ne verra plus l'infobulle elle passera sous la souris si on remonte tous en haut elle revient se placer comme dans le tutoriel au-dessus de la souris que peut-on faire pour que cela n'arrive pas, qu'il ne prenne pas en compte la barre de défilement.

Je tiens à m'excuser d'avance pour les fautes d'orthographe si il en reste je travaille avec un correcteur mais bon ce n'est pas fiable pour tous.

5 réponses

coloo
Réponse acceptée

Well voilà ce que j'ai modifié pour que ça marche sur ie firefox :

<div class="map-regions">
<img src="img/transparent.png" width="500" height="500" usemap="#Map" border="0"/>
<map name="Map">

Le map-regions est juste que j'avais déjà travaillé sur une carte intéractive et que je voulais prendre mon nommage plutôt que le tien :p

En modifiant le map en #Map, la map marchait sur firefox.

J'ai du supprimer la ligne console (test) pour que ie fonctionne.

Problème avec le tooltip :

Le code proposé au dessus ne fonctionnait que sur google chrome, je l'ai remplacé par : 

// Tooltip qui suit la souris
                $('.map-regions').mousemove(function(e){
                    $('.map-regions .tooltip').css({
                        top:e.clientY-$('.map-regions .tooltip').height()-20,
                        left:e.clientX-$('.map-regions .tooltip').width()/2-10
                    });
                });

Le premier code était en fonction du scroll page et celui là en fonction du client ;)

Ps : rendre à César ce qui est à César, ce code a été trouvé par popsantiago.

a+

coloo

Tu as déjà la seconde réponse via ce topic :

toolpic carte interactive (n'hésite pas d'utiliser la fonction recherche pour des questions sur les tutoriels ;) )

Mayzz
Auteur

Merci beaucoup pour le lien j'ai bien trouvé le code mais je ne comprend pas je suis vraiment pas une pro en javascript.
Et la ça se confirme car que je le mette n'importe comment soit toute mon animation ne fonctionne plus du tous.
Soit ça ne change rien j'ai beau me creuser la tête je n'y arrive pas seriez vous me donner un indice.

C'est bien ce code ici que je dois utiliser ?

$(window).trigger('scroll');

    $(window).scroll(function(event){
        // Valeur de défilement lors du chargement de la page
        windowScroll = $(window).scrollTop();

        // Mise à jour du positionnement en fonction du scroll
        if( windowScroll >= fixedLimit ){
            rocket.addClass('fixed');
        } else {
            rocket.removeClass('fixed');
        }
coloo

Envoies moi tes fichier via mon mail : mail@mail.fr (les fichier quand y a le bug mais que la carte fonctionne )

J'éditerais ce message quand tu m'auras envoyé les fichiers ^^.

Le code est pourtant dans le post qui a résolu le problème :

//toolistblabla
 $(document).mousemove(function(event){
 var elt = document.body;
 var iii = elt.scrollTop +20;

$('.map-regions .tooltip').css({
top:event.pageY-$('.map-regions .tooltip').height()-iii,
left:event.pageX-$('.map-regions .tooltip').width()/2-10
});
//document.getElementById('coucou').innerHTML = iii ; 
});
Mayzz
Auteur

Merci à toi de t'être penché sur le problème et pour le code popsantiago.

Et Merci pour les explications.
Par contre avec mon petit niveau sur que j'aurai pas trouvé toutes seul :D Merci beaucoup
Bonne continuation et à la prochaine