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

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>

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

编辑:移动到图像的特定区域的任何其他方法将是伟大的!

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