title: CSS image rollover map and jQuery : how to use a second li list?
body: <p>I'm currently using this clickable map (<a href="http://winstonwolf.pl/css,europe.html" rel="nofollow noreferrer">Wolf's map</a>) but I would like to use a second li list of countries in addition of the one that serves as a foundation for the script. The second menu cannot be in the same DIV as the map for presentation reasons. I've been searching through the JQuery documentation to understand how I can trigger an action on another element than the one selected but I'm not sure I've got it right - probably not as it is not working.</p>
  
  <p>The original script looks like this :</p>
  
  <pre><code>    $(document).ready(function(){
  
   var new_map='&lt;span class="map"&gt;&lt;span class="s1" /&gt;&lt;span class="s2" /&gt;&lt;span class="s3" /&gt;&lt;span class="s4" /&gt;&lt;span class="s5" /&gt;&lt;span class="s6" /&gt;&lt;span class="s7" /&gt;&lt;span class="s8" /&gt;&lt;span class="s9" /&gt;&lt;span class="s10" /&gt;&lt;span class="s11" /&gt;&lt;span class="s12" /&gt;&lt;span class="s13" /&gt;&lt;span class="s14" /&gt;&lt;span class="s15" /&gt;&lt;span class="s16" /&gt;&lt;span class="s17" /&gt;&lt;span class="s18" /&gt;&lt;/span&gt;';
   var new_bg=$("&lt;span&gt;");
   new_bg.addClass("bg");
   $("#europe li a").append(new_map);
   $("#europe li a").append(new_bg);
  
  });
  </code></pre>
  
  <p>What I would like to do is to trigger the same action when hovering another element that is not #europe li a. I have tried this :</p>
  
  <pre><code>$(document).ready(function(){
  
   var new_map='&lt;span class="map"&gt;&lt;span class="s1" /&gt;&lt;span class="s2" /&gt;&lt;span class="s3" /&gt;&lt;span class="s4" /&gt;&lt;span class="s5" /&gt;&lt;span class="s6" /&gt;&lt;span class="s7" /&gt;&lt;span class="s8" /&gt;&lt;span class="s9" /&gt;&lt;span class="s10" /&gt;&lt;span class="s11" /&gt;&lt;span class="s12" /&gt;&lt;span class="s13" /&gt;&lt;span class="s14" /&gt;&lt;span class="s15" /&gt;&lt;span class="s16" /&gt;&lt;span class="s17" /&gt;&lt;span class="s18" /&gt;&lt;/span&gt;';
   var new_bg=$("&lt;span&gt;");
   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");
   });
  
  });
  </code></pre>
  
  <p>It makes something but not the desired effect : it looks like the map can move indeed but not to the good positions (some countries get a white background after several hovers on the second menu).</p>
  
  <p>I would be very grateful if you could help me !</p>
  
  <p>Regards.</p>
  
  <p>PS : some relevant HTML and CSS parts.</p>
  
  <p>The original list</p>
  
  <pre><code>&lt;div id="b"&gt;
       &lt;ul id="europe" class="bottom five_columns"&gt;
        &lt;li id="europe1"&gt;&lt;a href="#" title="Albania"&gt;Albania&lt;/a&gt;&lt;/li&gt;
        &lt;li id="europe2"&gt;&lt;a href="#" title="Andorra"&gt;Andorra&lt;/a&gt;&lt;/li&gt;
        &lt;li id="europe3"&gt;&lt;a href="#" title="Austria"&gt;Austria&lt;/a&gt;&lt;/li&gt;
        ...
  </code></pre>
  
  <p>The menu I would like to add</p>
  
  <pre><code>&lt;div id="menudroite"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="France"&gt;France&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Grèce"&gt;Grèce&lt;/a&gt;&lt;/li&gt;
  ...
  </code></pre>
  
  <p>The original CSS</p>
  
  <pre><code>#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}
  ...
  </code></pre>