Question

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

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

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

Answer 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并计算位置并滚动到该位置

Answer 2

检查我创建的演示 ...

尝试通过id ...

导航区域

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

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

http://jsfiddle.net/D9W6C/

跳转到图像映射上的特定位置

2 个答案: