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 the region of 5000x3500 pixels. Each image has an image map (using rectangular areas), and all works fine in the desktop browsers I've tried.

The problem I'm finding, is that when users access the site via their iOS devices, the images are being rescaled by safari on the device, however the image map coordinates are not being adjusted to match.

An example of the HTML being generated by my PHP is as follows:

(The actual rectangle coordinates in the image map are calculated as a percentage of the image size).

I know that safari is resizing the image due to memory constraints on the device, but I need to either find a way of scaling the image map to suit, or replacing the image map with something else that will do the same job. Can anyone offer any advise?

user_1169603 · Answer

This topic was solved here on stackoverflow: jquery-image-map-alternative

The best idea is to use absolutely positioned anchors (also as suggested by steveax) instead of imagemap.

Update

As this is an old question, you might consider using SVG maps these days. They are supported in all modern browsers, works responsively and are as easy to use as image maps. (thanks to user vladkras for reminder)

user_519924 · Answer

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.

user_557612 · Answer

I ran into this limitation recently on a project where we needed to be able to zoom and this is what I did to solve it:

Split the image up into 4 quadrants
Placed the 4 images into divs with width and height set to 50% and position: absolute;
Absolutely positioned elements within the quadrant's parent element using percentage values and a high z-index

Like this:

CSS

#map-frame { position: relative; }
.map {
    display: block;
    position: absolute;
    width: 5%;
    height: 3%;
    z-index: 99;
}
.q {
    position: absolute;
    width: 50%;
    height: 50%;
}
.q img {
    display: block;
    max-width: 100%;
}
.q1 {
    top: 0;
    left: 0;
}
.q2 {
    top: 0;
    right: 0;
}
.q3 {
    bottom: 0;
    left: 0;
}
.q4 {
    bottom: 0;
    right: 0;
}

HTML

user_23616 · Answer

Simply using a # in the usemap attribute appears to solve the problem on iPhone.

For example and

user_8032511 · Answer

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

...

Hope it helps.

user_13886340 · Answer

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

user_662919 · Answer

please try using percentage values inside coordinates

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

11 Answers