Carte de survol de l'image CSS et jQuery: comment utiliser une deuxième liste li?

Question

J'utilise actuellement cette carte cliquable (Wolf's map) mais j'aimerais utiliser une deuxième liste de pays en plus de celle qui sert de base au script. Le second menu ne peut pas être dans la même DIV que la carte pour des raisons de présentation. J'ai recherché dans la documentation de JQuery comment je peux déclencher une action sur un autre élément que celui sélectionné mais je ne suis pas sûr d'avoir bien compris - probablement pas parce que ça ne marche pas.

Le script original ressemble à ceci:

$(document).ready(function(){ 

var new_map='<span class="map"><span class="s1" /><span class="s2" /><span class="s3" /><span class="s4" /><span class="s5" /><span class="s6" /><span class="s7" /><span class="s8" /><span class="s9" /><span class="s10" /><span class="s11" /><span class="s12" /><span class="s13" /><span class="s14" /><span class="s15" /><span class="s16" /><span class="s17" /><span class="s18" /></span>'; 
var new_bg=$("<span>"); 
new_bg.addClass("bg"); 
$("#europe li a").append(new_map); 
$("#europe li a").append(new_bg); 

}); 

Ce que je voudrais faire est de déclencher la même action en vol stationnaire un autre élément qui ne #europe li a. Je l'ai essayé:

$(document).ready(function(){ 

var new_map='<span class="map"><span class="s1" /><span class="s2" /><span class="s3" /><span class="s4" /><span class="s5" /><span class="s6" /><span class="s7" /><span class="s8" /><span class="s9" /><span class="s10" /><span class="s11" /><span class="s12" /><span class="s13" /><span class="s14" /><span class="s15" /><span class="s16" /><span class="s17" /><span class="s18" /></span>'; 
var new_bg=$("<span>"); 
new_bg.addClass("bg"); 
$("#carteeurope li a").append(new_map); 
$("#carteeurope li a").append(new_bg); 

$("#menudroite li a").hover(function(){ 
$(new_map).appendTo("#carteeurope li a"); 
$(new_bg).appendTo("#carteeurope li a"); 
}); 

}); 

Il fait quelque chose, mais pas l'effet désiré: il semble que la carte peut se déplacer en effet, mais pas aux bonnes positions (certains pays obtiennent un fond blanc après plusieurs survols sur le deuxième menu) .

Je serais très reconnaissant si vous pouviez m'aider!

Cordialement.

PS: quelques parties HTML et CSS pertinentes.

La liste originale

<div id="b"> 
    <ul id="europe" class="bottom five_columns"> 
     <li id="europe1"><a href="#" title="Albania">Albania</a></li> 
     <li id="europe2"><a href="#" title="Andorra">Andorra</a></li> 
     <li id="europe3"><a href="#" title="Austria">Austria</a></li> 
     ... 

Le menu Je voudrais ajouter

<div id="menudroite"> 
<ul> 
<li><a href="#">Accueil</a></li> 
<li><a href="#" title="France">France</a></li> 
<li><a href="#" title="Grèce">Grèce</a></li> 
... 

Le CSS d'origine

#europe,#europe span.bg{background:transparent url('europe-600px.png') no-repeat -9999px 0} 
#europe{position:relative;top:0;left:0;display:block;background-position:0 -966px;list-style:none} 
#europe *{padding:0;margin:0;border:0 none;outline:0 none} 
    #europe li{cursor:pointer} 
    #europe li span{position:absolute;display:block;width:0;height:0;z-index:15} 
    #europe li a span.bg{z-index:3} 
    #europe li .map{top:0;left:0} 
... 
#europe li span{position:absolute;display:block;top:0;left:0;width:0;height:0;z-index:15} 
#europe1 a:hover .bg{top:395px;left:303px;width:20px;height:40px;background-position:-10px -10px} #europe1 .s1{top:401px;left:303px;width:15px;height:32px} #europe1 .s2{top:397px;left:305px;width:8px;height:4px} #europe1 .s3{top:418px;left:318px;width:4px;height:9px} 
#europe2 a:hover .bg{top:385px;left:133px;width:5px;height:6px;background-position:-35px -10px} #europe2 .s1{top:383px;left:131px;width:9px;height:10px} 
... 

Answer 1

Problème résolu avec cette fonction:

$("#menudroite li.menudroitepays a").hover(
    function(){ 
    var country=$(this).attr("id"); 
    $("#europe" + country + " a").addClass("active"); 
    }, 
    function(){ 
    var country=$(this).attr("id"); 
    $("#europe" + country + " a").removeClass("active"); 
    } 

Answer 2

En ce qui concerne ma compréhension (Devinez), votre problème est, lorsque vous passez la souris sur un anchor tag votre la carte devient vide. Je pense que votre problème peut être résolu par le clonage du new_map & new_bg avant d'ajouter à #carteeurope li a

votre code actuel,

$("#menudroite li a").hover(function(){ 
    $(new_map).appendTo("#carteeurope li a"); 
    $(new_bg).appendTo("#carteeurope li a"); 
}); 

Je vous suggère de faire quelque chose ci-dessous,

$("#menudroite li a").hover(function(){ 
    var cache_new_map = new_map; //cache the new_map 
    var cache_new_bg = new_bg; //cache your span 
    $(cache_new_map).appendTo("#carteeurope li a"); 
    $(cache_new_bg).appendTo("#carteeurope li a"); 
}); 

La raison caching votre new_map & new_bg est Si vous allez à ajouter l'élément source à un autre élément, l'élément source est alors retiré de sa position initiale

PS: En fait, je ne comprends pas votre question, je ne devinais le pourrait-dessus être votre problème, vous pourrait obtenir une bonne réponse des gens autour de cette communauté si vous aviez fourni une démo en ligne (lien vers votre page de travail). Bien que vous fournissiez certains HTML & CSS il ne suffit pas de répondre.Parce qu'il est difficile de deviner quelle est votre intention réelle. NO OFFENSE

Selon ma compréhension (si elle correspond à votre question) cette solution devrait fonctionner