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

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)

Answer 2

<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,100%,10%" href="blah1"/>
  <area shape="rect" coords="0,10%,50%,70%" href="blah2"/>
  <area shape="rect" coords="50%,10%,100%,70%" href="blah3"/>
</map>

please try using percentage values inside coordinates

Answer 3

Why don't you use Responsive Image Maps instead. This way you can still use poly maps for oddly shaped items.

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

It's as easy as adding the script. And one line of javascript:

$('img[usemap]').rwdImageMaps();

Answer 4

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 <a> 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

<div id="map-frame">
    <a class="map" href="foo.html" style="top: 20%; left: 20%;">
    <a class="map" href="foo.html" style="top: 40%; left: 20%;">
    <a class="map" href="foo.html" style="top: 20%; left: 40%;">
    <a class="map" href="foo.html" style="top: 40%; left: 40%;">
    <div id="q1" class="q">
        <img alt="" src="q1.jpg" />
    </div>
    <div id="q2" class="q">
        <img alt="" src="q2.jpg" />
    </div>
    <div id="q3" class="q">
        <img alt="" src="q3.jpg" />
    </div>
    <div id="q4" class="q">
        <img alt="" src="q4.jpg" />
    </div>
</div>

Answer 5

Put all the content INSIDE A TABLE. Set to 100% width. The iphone doesnt seem to scale tables... I was struggling with this problem as i had my images just lose, or inside a div. none of the rect coords links were working. But when i put the whole lot inside a table... Well, just try it and see :)

Answer 6

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

For example <img usemap="#mapLink"> and <map name="mapLink">