In my experience, the only sure-fire way to get stuff like this to work is using JQuery (don't be afraid, it's just an external script file you have to include). Then you can use a statement like

$('#element').position()

or

$('#element').offset()

to get the current coordinates, which works excellently across any and all browsers I've encountered so far.

I'm working on something similar, but I wanted to make it responsive - not if you zoom in, image will be bigger and areas too. I didn't use <map>, because the coords are absolute. I used this:

<div id="mapdiv">
  <img src="link" id="imgmap" alt="" />
    <a href="target"><div id="box1">Here is the text</div></a>
    <div id="box2" onclick="alert('You can use js too')"></div>
</div>

And CSS:

#imgmap {
    width: 100%;
    }
div#mapdiv {
    position: relative; /* thanks to this... */
    }
div#menu div {
    position: absolute; /* ...and this are boxes positioned relatively inside the imgdiv */
    border: 1px dashed blue; /* for finding coords, remove after you are done */
}
div#box1 {
    left: 21%; /* my coords, make your own by trying and trying... */
    top: 26.5%;
    height: 5%;
    width: 6.5%
    }
div#box2 {
    left: 7.5%;
    top: 66.2%;
    height: 24.5%;
    width: 31.5%;
    }

I think using PhantomJS will be the easiest. No need for node.js.

You can combine examples/scandir.js and examples/phantomwebintro.js to get what you want.

var system = require('system');
var fs = require('fs');

if (system.args.length !== 2) {
    console.log("Usage: phantomjs scandir.js DIRECTORY_TO_SCAN");
    phantom.exit(1);
}

function scanDirectory(path, cb) {
    if (fs.exists(path) && fs.isFile(path)) {
        cb(path);
    } else if (fs.isDirectory(path)) {
        fs.list(path).forEach(function (e) {
            if (e !== "." && e !== "..") {
                scanDirectory(path + '/' + e, cb);
            }
        });
    }
}

function parsePage(path) {
    var page = require('webpage').create();
    page.open(path, function(status) {
        if (status === "success") {
           page.includeJs("http://code.jquery.com/jquery-latest.js", function() {
               var images = page.evaluate(function() {
                    var images = [];
                    $('img').each(function() {
                        images.push({ src: $(this).attr('src'), pos: $(this).position() });
                    });
                    return images;
               });
               console.log(images);
           });
         }
    });
}

scanDirectory(system.args[1], parsePage);

This script (phantomjs img.js kittens) will scan the directory for files, load every file in that directory (and subdirectories, you can modify this behavior in scanDirectory) and find all <img> tags on that page and return an array with their src attributes and .position().

Took me about 20 minutes to get this to work, so I think this is the easiest way.