Html 图像映射不适用于 iOS 设备，大图像会被设备重新缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6604222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image map not working on iOS devices, with large images that get rescaled by the device
提问by Bryan
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.
我正在使用 PHP 在我们公司的 Intranet 上开发一个内部 Web 应用程序。应用程序的一个部分向用户显示了几个高分辨率图像。这些图像在 5000x3500 像素的区域内。每个图像都有一个图像映射（使用矩形区域），并且在我尝试过的桌面浏览器中一切正常。
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.
我发现的问题是，当用户通过他们的 iOS 设备访问该网站时，设备上的 safari 会重新缩放图像，但是没有调整图像地图坐标以匹配。
An example of the HTML being generated by my PHP is as follows:
我的 PHP 生成的 HTML 示例如下：
<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?
我知道由于设备上的内存限制，safari 正在调整图像大小，但我需要找到一种方法来缩放图像贴图以适应，或者用其他可以完成相同工作的东西替换图像贴图。任何人都可以提供任何建议吗？
采纳答案by Marakoss
This topic was solved here on stackoverflow: jquery-image-map-alternative
这个话题是在 stackoverflow 上解决的：jquery-image-map-alternative
The best idea is to use absolutely positioned anchors (also as suggested by steveax) instead of imagemap.
最好的想法是使用绝对定位的锚点（也如 steveax 所建议的）而不是 imagemap。
Update
更新
As this is an old question, you might consider using SVG mapsthese 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)
由于这是一个老问题，您现在可能会考虑使用SVG 地图。所有现代浏览器都支持它们，响应式工作并且与图像映射一样易于使用。（感谢用户 vladkras 的提醒）
回答by tsdexter
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
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
It's as easy as adding the script. And one line of javascript:
就像添加脚本一样简单。还有一行 javascript：
$('img[usemap]').rwdImageMaps();
回答by Alex Holsgrove
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
内森的评论是正确的。您需要修复视口以防止缩放。基本上，要么指定固定像素宽度，要么将比例设置为 1.0 并设置 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.
使用区域标签的另一种方法是使用带有事件 x/y 和边界的 javascript 来处理您的命中区域。
回答by steveax
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
widthandheightset to 50% andposition: absolute;Absolutely positioned
<a>elements within the quadrant's parent element using percentage values and a highz-index
将图像分成 4 个象限
将 4 张图像放入 div
width并height设置为 50% 和position: absolute;<a>使用百分比值和高值在象限的父元素中绝对定位元素z-index
Like this:
像这样：
CSS
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
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>
回答by Steve
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 :)
把所有的内容放在一张桌子里面。设置为 100% 宽度。iphone 似乎不能缩放表格...我一直在努力解决这个问题，因为我的图像丢失了，或者在 div 中。没有一个 rect coords 链接工作。但是当我把所有东西都放在一张桌子里时......好吧，试试看:)
回答by Dabi
I dig out this post because I've just found a solution to get image map working on iOS.
我挖出这篇文章是因为我刚刚找到了一个解决方案来让图像映射在 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
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
在 iPad4 上用移动 safari 6.0 测试
回答by leolee10
Do not use Default<img usemap="#map">and <map name="map">change it. Like <img usemap="#mapLink">and <map name="mapLink">. It's working !!!
不要使用默认值<img usemap="#map">并<map name="map">更改它。喜欢<img usemap="#mapLink">和<map name="mapLink">。它的工作！
回答by mike nelson
Simply using a #in the usemapattribute appears to solve the problem on iPhone.
简单地#在usemap属性中使用 a似乎可以解决 iPhone 上的问题。
For example <img usemap="#mapLink">and <map name="mapLink">
例如<img usemap="#mapLink">和<map name="mapLink">
回答by Dana Haynes - Apple Consultant
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 的 css 中分配了高度和宽度以匹配图像的大小，一切正常。原始图像大小为 825 x 1068，因此
<div style= width: 825px; height: 1068px;">
...
</div>
Hope it helps.
希望能帮助到你。
回答by J S Rodrigues
<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
请尝试在坐标内使用百分比值
