Hello,

Je rencontre actuellement un petit soucis qui me donne mal au crâne .

  • Je possède une carte avec les départements découpés. Lors d'un hover sur un département, l'index prend la valeur de ce dernier.
  • Je dispose à cotès de cela, une liste des départements. Chaque département à un id lui correspondant (Ain=1, Nord=59, etc..).

Pour vous aider à comprendre, voici une image du front-office :

Voici le bout de code en question
Javascript

//hover des départements
            $('.map area').mouseover(function(){

                var index = $(this).index();

                //ne pas faire attention à ceci ci-dessous
                var left = -index*511 - 512;

                $('.map .tooltip').html(departements[index].name).stop().fadeTo(500,0.6);

                $('.map .overlay').css ({
                    backgroundPosition : left+"px 0px"
                });
                //ne pas faire attention à ceci ci-dessus

                //1ere tentative
                $('.liste_departements #'+index).css({
                    'color':'grey'
                });

                /*          2eme tentative

                var id_deps=[];
                $('.liste_departements>div[id]').each(function(){
                    id_deps.push($(this).attr('id') )
                });

                for (var n = 0; n <= 95; n++)
                {
                    if(id_deps[n]==index)
                    {
                    $('#'+index).css({"color":"black"});
                    }

                } 

                */

            });

Je souhaiterai que, lorsqu'un département est survolé avec la souris, alors le département concerné dans la liste change de couleur.
Aussi simple que cela puisse paraître, j'y suis bloqué depuis plusieurs heures et je sais que vous pouvez m'aider ! :)

Bien evidemment, si je poste ce sujet, c'est que lorsque je survole un département, l'élement de la liste ne change pas.

PRECISION : La liste est également créer en Jquery, de ce fait, je vous propose plutôt une photo du DOM

Comme vous pouvez le constater, je ne sais pas pourquoi c'est l'élement 2 qui est choisit, et en plus de ça il ne prend pas en compte le changement de couleur.

Je vous remercie d'avance pour le temps que vous allez passer à lire ce topic,
Bonne fin de journée

1 réponse


Hello,

Pour le changement de couleur il faut cibler le lien dans la div, essaye plutôt :

$('.liste_departements #'+index).find('a').css({'color':'grey'});

et ça devrait fonctionner.

Pour index ça te retourne ton id-1 car l'index commence par 0. Pour récupérer l'id de ton element utilise http://api.jquery.com/attr/