CSS 이미지 롤오버지도 및 jQuery : 두 번째 li 목록 사용 방법

Question

현재이 클릭 할 수있는지도 (Wolf's map)를 사용하고 있지만이 스크립트의 기초가되는 국가 외에 두 번째 국가 목록을 사용하고 싶습니다. 두 번째 메뉴는 프리젠 테이션 이유로지도와 동일한 DIV에있을 수 없습니다. 내가 선택한 요소가 아닌 다른 요소에서 동작을 트리거 할 수있는 방법을 이해하기 위해 JQuery 설명서를 검색해 보았지만 올바르게 작동하는지 확신 할 수 없습니다.

원래 스크립트는 다음과 같습니다

$(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); 

}); 

는 내가 뭘하고 싶은 #europe의 리튬하지 않은 또 다른 요소를 유혹 할 때 같은 동작을 트리거하는 것입니다. 나는 이것을 시도 :

는

$(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"); 
}); 

}); 

그것은 무언가를 만드는하지만 원하는 효과는 : 맵 (일부 국가에서는 두 번째 메뉴에 여러 마우스 오버 후 흰색 배경을 얻을) 좋은 위치에 있지하지만 실제로 이동할 수 있습니다 것 같습니다 .

나를 도울 수 있다면 매우 감사 할 것입니다!

감사합니다.

추 신 : 일부 관련 HTML 및 CSS 부분.

원래 목록

<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> 
     ... 

내가하고 싶은 메뉴는 나의 이해 (추측)로

#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

이 기능으로 해결 문제 작업을해야 내 이해에 따르면

$("#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

지금까지

<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> 
... 

원래 CSS를 추가하는 방법 문제는 anchor 태그 위로 마우스를 가져 가면 지도가 비어 있습니다. 나는

$("#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"); 
}); 

이유에 대한

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

난 당신이 아래에 뭔가를 제안, 문제가 #carteeurope li a

실제 코드를 추가하기 전에 new_map & new_bg를 복제하여 해결 될 수 있다고 생각 caching 귀하의 new_map & new_bg입니다. 에 추가하려는 경우 다른 요소에 소스 요소의 소스 요소가 원래의 위치

PS에서 제거됩니다 : 사실 나는 당신의 질문을 이해하지, 난 그냥 당신이 위의 수 있습니다 문제를 추측 데모 (ur 작업 페이지로 연결되는 링크)을 제공 한 경우이 커뮤니티의 사람들로부터 좋은 답변을 얻을 수 있습니다. 일부를 제공했지만 HTML & CSS 대답하기에 충분하지 않습니다.실제 의도가 무엇인지 추측하기가 어렵 기 때문입니다. NO OFFENSE

(이것은 귀하의 질문에 일치하는 경우)이 솔루션은