1

jQuery でインタラクティブ マップを作成しており、カスタムの手描きマップを使用しています。一連の「トリガー ポイント」をマップ全体に配置し、マップのサイズに対して絶対的に配置しました。これらのトリガー ポイントにカーソルを合わせると、その場所に関する情報がツールチップに表示されます。

HTML/CSS:

<div id="map" style="position:relative; background: url(images/map.jpg">
    <div class="trigger" data-loc="locationA" style="position:absolute; left:10px; top:3px"><h1 class="tooltip">Location A Title</h1></div>
    <div class="trigger" data-loc="locationB" style="position:absolute; left:0px; top:24px"><h1 class="tooltip">Location B Title</h1></div>
    <div class="trigger" data-loc="locationC" style="position:absolute; left:140px; top:35px"><h1 class="tooltip">Location C Title</h1></div>
    <div class="trigger" data-loc="locationD" style="position:absolute; left:70px; top:103px"><h1 class="tooltip">Location D Title</h1></div>
</div>

JQuery:

$(".trigger").hover(function(){
   $(this).find(".tooltip").fadeIn();
}, function(){
   $(this).find(".tooltip").fadeOut();
});

いくつかの質問:
1) JQuery を使用して基本的なインタラクティブ マップを作成するには、これが最善の方法ですか?

2) 場所のリストを右側に表示したい。ユーザーがリンクをクリックすると、関連するリンクのツールチップもトリガーされます。上記のように、各トリガーポイントには data-loc 属性があります。右側のアンカー リンクに同じデータ ポイントを設定した場合、jQuery を使用してそれらをリンクし、関連するツールチップのフェードインとフェードアウトをトリガーするにはどうすればよいでしょうか?

4

1 に答える 1

1

私の知る限り、これを行う最善の方法はありません。もう少しわかりやすい方法は、div の代わりにarea タグを使用することです。

<!DOCTYPE >
<html>
<body>
  <img src="image/all balls.jpg" style="width: 450px; height: 450px;" 
       alt="Balls" usemap="#BallMap" />
  <map name="BallMap">
    <area id="whiteArea" class="hoverArea" shape="circle" coords="78,81,76.5" 
          nohref="nohref" alt="white" />
    <area id="blueArea" class="hoverArea" shape="circle" coords="260,81,76.5" 
          nohref="nohref" alt="blue" />
    <area id="redArea" class="hoverArea" shape="circle" coords="84,254,76.5"
          nohref="nohref" alt="red" />
  </map>
</body>
</html>

次に同様に：

$(".hoverArea").hover(function(){
   showToolTip($(this));
}, function(){
   hideToolTip($(this));
});

ツールチップを表示するためのカスタム関数を作成するには、おそらくもう少し作業が必要です。(注: 私自身、Area を使用したことはありません。)

アップデート

これを実現するには、いくつかの方法があります。

すでに絶対値を使用しているため、半ハックな方法は、現在の div の周りに別の div を配置することですが、絶対的に右側に配置することです。ハッキーですが動作します。

私はそうしません。私の意見では、これの方がはるかに優れているからです。

<div id="map" style="position:relative; background: url(images/map.jpg">
  <div class="trigger" data-loc="locationA" id="locationA"
       style="position:absolute; left:10px; top:3px">
    <h1 class="tooltip">Location A Title</h1>
  </div>
  <div class="trigger" data-loc="locationB" id="locationB" 
       style="position:absolute; left:0px; top:24px">
    <h1 class="tooltip">Location B Title</h1>
  </div>
  <div class="trigger" data-loc="locationC" id="locationC"
       style="position:absolute; left:140px; top:35px">
    <h1 class="tooltip">Location C Title</h1>
  </div>
  <div class="trigger" data-loc="locationD" id="locationD"
       style="position:absolute; left:70px; top:103px">
    <h1 class="tooltip">Location D Title</h1>
  </div>
</div>

<div class="sidebar">
  <div class="trigger" data-loc="locationA"> Loc A
  </div>
  <div class="trigger" data-loc="locationB"> Loc B
  </div>
  <div class="trigger" data-loc="locationC"> Loc C
  </div>
  <div class="trigger" data-loc="locationD"> Loc D
  </div>
<div>

次に、jQuery を使用します。

$(".trigger").hover(function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeIn();
}, function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeOut();
});
于 2012-07-10T19:11:19.857 に答える