1

私は現在、このクリッカブル マップ ( Wolf's map ) を使用していますが、スクリプトの基礎として機能するリストに加えて、2 つ目の国リストを使用したいと考えています。表示上の理由から、2 番目のメニューをマップと同じ 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 li a ではない別の要素をホバリングしたときに同じアクションをトリガーすることです。私はこれを試しました：

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

});

それは何かを作りますが、望ましい効果ではありません: マップは確かに移動できるように見えますが、適切な位置には移動できません (2 番目のメニューに数回ホバーすると背景が白くなる国もあります)。

あなたが私を助けることができれば、私はとても感謝しています!

よろしく。

PS : 関連する 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>
      ...

追加したいメニュー

<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

#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}
...
4

2 に答える 2

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");
   }
于 2010-08-06T19:09:16.040 に答える
0

私の理解(推測)の限りでは、あなたの問題は、anchorタグの上にカーソルを合わせると、マップが空になることです。に追加する前にnew_map&を複製することで問題を解決できると思いますnew_bg#carteeurope li a

あなたの実際のコード、

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

以下のことを行うことをお勧めします。

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

&の理由はcaching、ソース要素を他の要素に追加する場合、ソース要素が元の位置から削除されることですnew_mapnew_bg

PS : 実際にはあなたの質問が理解できません。上記があなたの問題かもしれないと推測しました。オンラインデモ(作業ページへのリンク) を提供していれば、このコミュニティの人々から良い回答を得ることができます。いくつかのHTMLとCSSを提供しましたが、答えるには十分ではありません。あなたの本当の意図が何であるかを推測するのは難しいからです。NO OFFENSE

私の理解によると（それがあなたの質問と一致する場合）、この解決策はうまくいくはずです

于 2010-08-01T18:40:11.860 に答える