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 solved this with only 1 line of code, no JavaScript. Only CSS, you need to use zoom property to scale your image and everything will work fine, just like this

img {
    zoom: 0.3;
}

Answer 2

Nathan's comment is correct. You need to fix the viewport to prevent scaling. Basically, either specify a fixed pixel width, or set the scale to 1.0 and set user-scalable=no

See this document for reference:

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

An alternative to using the area tag is to use javascript with events x/y & bounds for your hit areas.

Answer 3

Do not use Default <img usemap="#map"> and <map name="map"> change it. Like <img usemap="#mapLink"> and <map name="mapLink">. It's working !!!

Answer 4

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

<a id="areas" href="#">
    <img src="example.jpg" usemap="#mymap" width="1024" height="768">
    <map name="mymap">
        <area id="area1" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area2" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area3" shape="poly" coords="X1,Y1,X2,Y2...">
    </map>
</a>

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

Answer 5

My solution was easy. I just assigned a height and width in the DIV's css to match the size of the image and everything worked fine. Original image size was 825 x 1068, so

    <div style= width: 825px; height: 1068px;">
    ...
    </div>

Hope it helps.