image map not working on iOS devices, with large images that get rescaled by the device
Solution 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)
Solution 2
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();
Solution 3
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:
An alternative to using the area tag is to use javascript with events x/y & bounds for your hit areas.
Solution 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
andheight
set to 50% andposition: absolute;
Absolutely positioned
<a>
elements within the quadrant's parent element using percentage values and a highz-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>
Solution 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 :)
Bryan
Developer, Systems Admin, Geek, Gadget lover, etc. etc. I started programming in BASIC at the age of 11 on a Sinclair ZX81, advanced to a BBC Model B, where I learned 6502 assembly language programming. I never really worked with PCs until the early 90s. In the late 90s, I joined a higher educational institution as a desktop technician, a quickly got promoted to be a systems admin, working predominantly on Windows systems, but also had a keen interest in Linux systems. I later got involved in software development, working in C#, PHP, C. In my current employment, I'm the manager of the company's Information Systems department. The primary focus of our business is industrial control systems (mostly legacy systems). The work isn't exclusively legacy/control systems though, as we also support modern systems for a number of business customers. We're always on the lookout for staff who are interested in working with legacy/control systems. Experience or qualifications might help, but aren't always important. A geeky persona is essential though. If you think this would be interested please get in touch with me via our web site, or twitter.
Updated on July 09, 2022Comments
-
Bryan almost 2 years
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?
-
TheBlackBenzKid about 12 yearsI 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/…
-
steveax about 12 yearsValues in the
coords
need to be expressed as CSS pixels -
TheBlackBenzKid about 12 years@steveax is right here as I tried to use percentages - it does not work.
-
TheBlackBenzKid about 12 yearsAppreciate the link and comments to the article + repped.
-
TheBlackBenzKid about 12 yearsThe 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.
-
benedict_w over 11 yearsFWIW this worked for me:
<meta name="viewport" content="user-scalable=no, width=1000" />
(my page width is 1000px) -
Ty Bailey over 10 yearsThis only works to resize your coordinates according to screen size. It doesn't make it work on touch devices.
-
tsdexter over 10 yearsIt 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.
-
Shwaydogg almost 10 yearsThis 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.
-
tsdexter almost 10 years@Shwaydogg 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.
-
vladkras over 8 years
-
rams over 7 yearswhat's the difference?