Search code examples
javascripthtmlimageimagemap

Jump to a specific location on an image map

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

Solution

  • 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