Is it possible to scroll to a image map area?

Question

I'm stuck on this problem - I have 4 img maps below each other on single page. I have a autocomplete search field on top of the page and when typing string to search for, areas on every map are being highlighted.

Final step what I want to do is, when I select suggested word to highlight only 1 corresponding area (this is done) and to move (scroll) to this area. But I can't seem to get this working.

Every area has unique id like so:

<area id="1-1-5" href="#" alt="" shape="rect" coords="1103,103,1183,169">
<area id="1-1-7" href="#" alt="" shape="rect" coords="1207,103,1272,184">
<area id="1-1-2" href="#" alt="" shape="rect" coords="939,220,1019,286">

I hoped if I enter this id to URL (e.g. index.php#1-1-7), that it will jump to corresponding area, but it doesn't. I don't know if this is standard behavior for img maps, or if it's some sort of issue with imageMapster, which I'm using for its awesome highlighting and tooltips over areas.

I also tried jQuery .scrollTop() function, but with no luck.

If anyone has any idea how to make this possible, I'll be glad to try it out.

scrollTop should do what you want as long as this feature is beeing executed after any other movement scripts. — Adrian Forsius, Oct 06 '14 at 13:32
See http://stackoverflow.com/questions/2567403/how-to-get-top-left-x-y-of-image-map-with-javascript-jquery for a discussion of retrieving scroll offset of image map polygons. — Palpatim, Oct 06 '14 at 15:27

score 2 · Accepted Answer · answered Oct 07 '14 at 12:56

Thanks to Adrian Forsius and Palpatim I now have a working function, just what I needed. Thank you guys.

function findCoordinates(area_id){
    if (area_id != null && area_id != '') {
        var i, x = [], y = [];
        var c = $("area#" + area_id).attr('coords').split(',');
        for (i=0; i < c.length; i++){
            x.push(c[i++]);
            y.push(c[i]);
        }
        var t = y.sort(num)[0];
        var l = x.sort(num)[0];
        if (area_id.charAt(0) == '1') {
            t = parseInt(t) + 1350; // added height of 1st map
        } else if (area_id.charAt(0) == '3') {
            t = parseInt(t) + 2700; // added height of 1st and 2nd map
        }
//         alert( 'top = ' + t + ', left = ' + l );
        $(".image-maps").offsetParent().scrollTop(t);
    }
}

function num(a, b){
    return (a-b);
}

Is it possible to scroll to a image map area?

1 Answers1