3

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

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

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

4

2 回答 2

6

试试这个链接

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

我使用了插件scrollTo

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

于 2013-04-06T07:33:42.377 回答
0

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

尝试通过 id 导航区域...

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

您必须使用其中的区域坐标...

http://jsfiddle.net/D9W6C/

于 2013-04-04T06:48:31.723 回答