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.

Answer 1

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);
}