在图像映射中跳转到特定位置

Question

我有一张带有HTML <map> 的大图片，我想跳转到该图像上的特定区域。我已经使用<area /> 标签标记了这些位置。

请看以下代码：

<img src="demo_files/k3.png" id="target" alt="Map" usemap="#powerpuffgirls" />
<map name="powerpuffgirls">
    <area shape="rect" coords="624,137,671,167" href="#" id="ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
    <area shape="rect" coords="99,2685,161,2723" href="#" name="ppg1" title="The Powerpuff Gidrls" alt="The Powerpuff sGirls" />
</map>

然而，我无法移动到图像的任何区域。

编辑：任何其他移动到图像特定区域的方法都将是很好的！

- Krishna

---

这是大于显示器分辨率的屏幕吗...？ - SaurabhLP

@SaurabhLP 是的，页面同时显示了滚动条！ - Krishna

Answer 1

尝试使用此链接

$('a.links').click(function(e){
  e.preventDefault();
  var coor = $(this.hash).attr('coords').split(',');
  $('html,body').scrollTo(coor[0], coor[1]);
});

我使用了插件scrollTo。脚本将阻止默认函数并从具有href属性的区域标签获取id和coordinates属性，计算位置并滚动到该位置。

- Nisanth Sojan

Answer 2

请查看我创建的演示...

尝试通过ID导航到不同区域...

<div><a href="#ppg">Go to one</a> <a href="#ppg1">Go to two</a></div>

你需要在其中调整区域坐标...

http://jsfiddle.net/D9W6C/

- SaurabhLP

---

感谢您的回答，但是从您的示例中可以看出，在区域中给定任何坐标时，页面都会在同一位置移动。 - Krishna