Login/Register
image map not working on iOS devices, with large images that get rescaled by the device
Asked Answered
Solved iphonehtmliosipadimagemap
T

11

14

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:

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

(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?

Tiro answered 6/7, 2011 at 23:31 Comment(12)
I'm actually experiencing the same thing. Is this a known bug you think? I don't know if it helps, but on the iPhone my maps work correctly when I hold it land-scape style. Trying to load the page portrait style breaks the maps. In either style, rotating to the opposite breaks it as well. – Mauldon
Started a bounty to get this. I have even tried width="100%" - I do not know what to do with it. – Alphabetical
Rescaling the image with php is an option? – Gausman
Bit of a stab in the dark, but does adding <meta name="viewport" content="user-scalable=no, width=5000" /> to your <head> help at all? – Indeterminism
I tried this. I am sending an email out and iPhone IOS devices scale image maps - tried using webkit-text-size-adjust: none; amd a;sp the viewport but no luck. – Alphabetical
Also read this, #2722343 - but still no luck. – Alphabetical
I ended up resolving this problem by changing the way my web app worked, so didn't manage to find a solution. Maybe worth talking to Apple to fix the underlying bug in their browser? – Tiro
How can you submit a bug to them? – Alphabetical
@Alphabetical I'm not able to test any solution easily now, (due to me using a different approach). If any of the answers posted here work, let me know and I'll accept the answer. - I'm assuming you can't accept an answer even though you've added a bounty? – Tiro
@Alphabetical It's not a bug, but a documented limitation in Mobile Safari. – Illampu
is there a solution that works for non-rectangular image maps? – Elicia
I'm seeing the same issues with chrome on Android devices. :( – Chrisoula
C
5

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)

Chud answered 3/4, 2012 at 8:6 Comment(3)
Appreciate the link and comments to the article + repped. – Alphabetical
The article links to several sources. I think this combination is good as it depends on the client/scenario. I would also consider HTML5 canvas - map canvas cords around the image and have links on canvas elements. – Alphabetical
the best part of this link is unnoticed unvoted answer with article about SVG – Shewchuk
P
5

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();
Peterus answered 16/6, 2013 at 19:44 Comment(4)
This only works to resize your coordinates according to screen size. It doesn't make it work on touch devices. – Sheer
It works really well for me. I'm in the same boat. I needed large desktop images with maps to scale the image maps along with the safari image scaling in mobile safari and mobile chrome. Added rwd and they work just fine. – Peterus
This method was not working on chrome for iOS. It was working safari mobile and chrome for android. I ended up falling back on absolutely position anchor elements with percentage values for positioning and and size. – Oleo
@Oleo it may not have been working on chrome for iOS because you didn't set the "width" and "height" attributes of the img tag explicitly to the images native width/height and then use CSS to set the actual width/height you want. That was the issue for me. – Peterus
B
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.

Bucko answered 30/3, 2012 at 9:24 Comment(2)
I actually just created the PSD as a TABLE - made those cells link images and did it this way. Also adding display:block and border-collaspe to the table cells - rather than a map. I tried all of this but no luck. I would recommend this for future use for others: econsultancy.com/uk/blog/… – Alphabetical
FWIW this worked for me: <meta name="viewport" content="user-scalable=no, width=1000" /> (my page width is 1000px) – Elicia
I
1

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>
Illampu answered 1/4, 2012 at 18:8 Comment(0)
S
0

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 :)

Specialist answered 15/5, 2013 at 7:15 Comment(0)
F
0

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

Freemasonry answered 21/10, 2014 at 0:40 Comment(0)
F
0

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

Fulfill answered 20/1, 2016 at 1:19 Comment(1)
what's the difference? – Brakpan
Z
0

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

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

Zebe answered 22/9, 2017 at 7:29 Comment(0)
C
0

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.

Chairmanship answered 4/11, 2017 at 15:17 Comment(0)
B
0

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;
}
Brockwell answered 19/8, 2020 at 18:41 Comment(0)
S
-3
<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

Sussna answered 1/4, 2012 at 17:27 Comment(2)
Values in the coords need to be expressed as CSS pixels – Illampu
@Illampu is right here as I tried to use percentages - it does not work. – Alphabetical

© 2022 - 2024 — McMap. All rights reserved.