image map not working on iOS devices, with large images that get rescaled by the device

Question

I\'m developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in th

Answer 1

I dig out this post because I've just found a solution to get image map working on iOS.

Put your map within an anchor and listen click/tap events on it, to check if the target element matches with a map's area.

HTML

JAVASCRIPT

$("#areas").on("click tap", function (evt) {
    evt.preventDefault();
    if (evt.target.tagName.toLowerCase() == "area") {
        console.log("Shape " + evt.target.id.replace("area", "") + " clicked!");
    }
});

Tested on iPad4 with mobile safari 6.0