图像地图不适用于iOS设备，大型图像会被设备重新缩放 [英] image map not working on iOS devices, with large images that get rescaled by the device

问题描述

我正在使用PHP在公司内部网上开发内部Web应用程序。应用程序的一部分向用户显示一对高分辨率图像。这些图像在5000x3500像素的区域内。每个图像都有一个图像映射（使用矩形区域），并且在我尝试过的桌面浏览器中都可以正常工作。

我发现的问题是，用户通过他们的iOS设备访问网站，图像被设备上的Safari浏览器重新调整大小，但图像地图坐标未被调整为匹配。

由我的PHP生成的HTML如下所示：

 < img src =largeimage.jpgwidth =5000 height =3500usemap =＃examplemap> 
< map name =examplemap> 
< area shape =rectcoords =0,0,5000,500href =blah1/> 
< area shape =rectcoords =0,500,2500,3500href =blah2/> 
< area shape =rectcoords =2500,500,5000,3500href =blah3/> 
< / map> 
  

（图像映射中的实际矩形坐标是以图像大小的百分比计算的） / p>

我知道safari会因为设备上的内存限制而调整图像大小，但我需要找到缩放图像映射以适应图像或替换图像的方法用其他可以做同样工作的东西映射。任何人都可以提供任何建议？

解决方案

这个主题在这里解决了stackoverflow： jquery-image-map-alternative

最好的想法是使用绝对定位的锚点（也就是steveax所建议的）而不是imagemap。
$ b $ p 更新

这是一个古老的问题，您现在可能会考虑使用 SVG地图。它们在所有现代浏览器中都得到支持，响应式地工作，并且与图像映射一样易于使用。 （感谢用户vladkras提醒）

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?

解决方案

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)

这篇关于图像地图不适用于iOS设备，大型图像会被设备重新缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！