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>

查询：

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

几个问题：
1) 这是使用 JQuery 制作基本交互式地图的最佳方式吗？

2）我想在右边列出一个位置列表。当用户点击链接时，它还应该触发相关链接的工具提示。如上图，每个触发点都有一个data-loc属性。如果我在右侧的锚链接中设置相同的数据点，我将如何使用 jQuery 将它们链接起来并触发相关工具提示的淡入和淡出？

4

1 回答 1

1

据我所知，没有最好的方法来做到这一点。一种更具描述性的方法是使用区域标签而不是 div。

<!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。）

更新

有几种方法可以做到这一点。

一个半hacky的方式，因为你已经在使用absolutes是在当前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 回答