Перейти к определенному местоположению на карте изображения

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

Попробуйте link

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

я использовал плагин scrollTo

сценарий будет препятствовать функции по умолчанию тега и получит атрибут координаты из области тега с идентификатором из HREF атрибута и вычисления позиций и выберите, что позиция

Answer 2

Проверить это демо я создал ...

Try перемещаться области от ид ...

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

Вы должны играть с областью координат в ней ...

http://jsfiddle.net/D9W6C/