跳转到图像地图上的特定位置答案

【问题标题】：Jump to a specific location on an image map跳转到图像地图上的特定位置
【发布时间】：2013-04-04 06:20:26
【问题描述】：

我有一张带有 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>

但是，我无法移动到图像上的任何区域。

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

【问题讨论】：

是不是比显示器的屏幕分辨率还大...??
@SaurabhLP 是的，页面显示两个滚动条！

标签： javascript html image imagemap

【解决方案1】：

试试这个link

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

我用过插件scrollTo

脚本将阻止标签的默认功能，并将从区域标签中获取坐标属性，并从 href 属性中获取 id 并计算位置并滚动到该位置

【讨论】：

【解决方案2】：

查看我创建的这个演示...

尝试按 id 导航区域...

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

你必须在里面玩区域坐标...

http://jsfiddle.net/D9W6C/

【讨论】：

感谢您的回答，但您可以在示例中看到页面正在同一位置移动，无论区域中给出的坐标如何..