Jump to a specific location on an image map

Question

I have a big image with an HTML <map>, and I want to jump to a particular region on that image. I have used the <area /> tag for marking the locations

Take a look at the code :

<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>

however, I am unable to move to any region on the image.

Edit: Any other approach for moving to an image's particular region would be great !!

is that bigger than the screen resolution of the monitor...?? — SaurabhLP, Apr 04 '13 at 06:28

Nisanth Sojan · Accepted Answer · 2013-04-06T10:32:10.767

6

Try this link

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

i have used the plugin scrollTo

the script will prevent default function of a tag and will get the coordinates attribute from the area tag with the id from the href attribute and calculate the positions and scroll to that position

edited Apr 06 '13 at 10:32

answered Apr 06 '13 at 07:33

Nisanth Sojan

1,099
8
21

score 0 · Answer 2 · answered Apr 04 '13 at 06:48

0

Check this demo i have created...

Try to navigate the areas by id...

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

You have to play with the area coordinates in it...

http://jsfiddle.net/D9W6C/

answered Apr 04 '13 at 06:48

SaurabhLP

3,619
9
40
70

1

thanks for your answer but you can see in your example the page is moving on same location, whatever the coordinates given in area.. – Krishna Apr 04 '13 at 07:04

Jump to a specific location on an image map

2 Answers2